Question

我有一个带有不可编辑的硬编码值的文本框。我需要帮助来检索它并在按钮点击时显示。如何验证下拉列表以使其成为必需项？如何在此下拉列表中显示所选值，我尝试使用ng-model但它不起作用。

<div class="col-sm-6">
   <input  class="form-control" id="focusedInput" type="text" value="El Dix" readonly>
</div>

对于下拉列表，这里是代码： -

<select ng-model="createCall_Urgency" class="form-control" >
  <option value="Low">Low</option>
  <option value="Medium">Medium</option>
  <option value="High">High</option>
 <option value="Major">Major</option>
</select>

Answer 1

1）我需要帮助来检索它并在点击按钮上显示

HTML

<button id="getValue" ng-click="getValue()">Get Value</button>
<input  class="form-control" id="focusedInput" type="text" ng-model="focusedInput" readonly>

JS

$scope.focusedInput='El Dix';
$scope.getValue=function(){
    alert($scope.focusedInput);
}

2）如何验证下拉列表是否需要它？

您需要使用required属性。

<select ng-model="createCall_Urgency" class="form-control" required>
   <option value="Low">Low</option>
   <option value="Medium">Medium</option>
   <option value="High">High</option>
   <option value="Major">Major</option>
</select>

3）如何在此下拉列表中显示所选值？

我建议你创建一个对象数组并使用ngOptions指令。

这样的事情：

＆＃13;

var app = angular.module('eApp', []);
app.controller('ArrayController', ['$scope', function($scope) {

  $scope.myOptions = [{
    "id": 'Low',
    "text": 'Low'
  }, {
    "id": 'Medium',
    "text": 'Medium'
  },
  {
    "id": 'High',
    "text": 'High'
  },{
    "id": 'Major',
    "text": 'Major'
  }];
  $scope.createCall_Urgency = $scope.myOptions[0];
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<body ng-app="eApp">
  <div ng-controller="ArrayController">
    <select ng-model="createCall_Urgency" class="form-control" data-ng-options="options as options.text for options in myOptions">
  <option value="Low">Low</option>
  <option value="Medium">Medium</option>
  <option value="High">High</option>
 <option value="Major">Major</option>
</select>
    {{createCall_Urgency.text}}
  </div>

</body>

＆＃13;

在只读文本框中获取值

1 个答案: