Шаблон можно упростить с помощью директивы ng-options
:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.myVar = "PR3";
$scope.otherOptions = otherOptions("PR3");
$scope.updateOtherOptions = function(myVar) {
$scope.otherOptions = otherOptions(myVar);
};
function otherOptions(myVar) {
switch (myVar) {
case "DR9": return [100,400,500];
case "QR9": return [400,500];
default: return [100,400,500];
};
};
})
<!DOCTYPE html>
<html>
<script src="//unpkg.com/angular/angular.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
Password Reset
<form>
<br>
<label>System:</label>
<select ng-model="myVar" ng-change="updateOtherOptions(myVar)">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br>
Client options={{otherOptions}}
<br>
<label>Client:</label>
<select ng-model="otherSel" ng-options="sel for sel in otherOptions">
<option value="">Select...</option>
</select>
</form>
</body>
</html>
Атрибут ngOptions
можно использовать для динамического создания списка элементов <option>
для элемента <select>
с использованием массива или объекта, полученного путем вычисления выражения понимания ngOptions
.
Когда выбран элемент в меню <select>
, элемент массива или свойство объекта, представленное выбранной опцией, будут привязаны к модели, определенной директивой ngModel
.
При желании в элемент <select>
может быть вложен один жестко закодированный элемент <option>
со значением, установленным в пустую строку. Затем этот элемент будет представлять параметр null
или «не выбран».
Для получения дополнительной информации см.