我在使用带有 Angular Material 的 angularjs 时遇到问题。 在表单中，我有二十个选择字段。我必须观察所有字段，因为我必须允许用户仅编译二十个字段中的三个。如果用户尝试编译第四个字段，则该字段必须返回空白(没有值选择)。
我给出的 HTML 仅包含 4 个字段，但实际上有 20 个字段(我从 Angular Material 网站获取代码)。
<div ng-controller="SelectAsyncController" layout="column" layout-align="center center" style="padding:40px" ng-cloak>
<p>Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:</p>
<div layout="column" layout-align="center center" style="height: 100px;">
<md-select placeholder="Assign to user" ng-model="field1" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field2" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field3" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<md-select placeholder="Assign to user" ng-model="field4" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
<p class="md-caption">You have assigned the task to: {{ user ? user.name : 'No one yet' }}</p>
</div>
</div>
js:
$scope.user = null;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 650ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 650);
};
});
有办法做类似的事情吗？ 谢谢建议。
最佳答案
下面您可以看到我提出的解决方案的实际效果。
简要说明:我使用数组作为字段的模型，因此 <md-select>指令由 ng-repeat 循环生成。具体来说，每个 select 元素的模型是字段项(数组的每个项)的 value 属性。
一个<强> $watch ('fields', ...) 检查数组更改，其监听器对已填充的字段进行计数(使用函数 filledFieldsCount() )并验证计数是否等于允许的最大值...
请注意，$watch 将第三个参数设置为 true，以便观察数组项属性的深度变化: $scope.$watch('fields', listener, true);
angular
.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $timeout) {
$scope.fields = [
{ "name": "task1", "value": null, "enabled": true },
{ "name": "task2", "value": null, "enabled": true },
{ "name": "task3", "value": null, "enabled": true },
{ "name": "task4", "value": null, "enabled": true },
{ "name": "task5", "value": null, "enabled": true }
];
$scope.maxNrFields = 3;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 250ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 250);
};
$scope.$watch('fields', function(newValue, oldValue) {
console.log("$watch");
if ($scope.filledFieldsCount()==$scope.maxNrFields) {
angular.forEach($scope.fields, function(field){
if (!field.value) field.enabled = false;
});
}
}, true);
$scope.filledFieldsCount = function() {
var count = 0;
angular.forEach($scope.fields, function(field){
count += field.value ? 1 : 0;
});
return count;
}
});.alert {
text-align: center;
width: 100%;
color: red;
}<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
<div ng-controller="AppCtrl as ctrl" class="md-padding" ng-cloak="" ng-app="MyApp">
<div layout="column" layout-align="center center" style="padding:40px" ng-cloak>
<div layout="column" layout-align="center center">
<md-select placeholder="Assign {{field.name}} to user" ng-repeat="field in fields" ng-model="field.value" ng-disabled="!field.enabled" md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
</div>
</div>
<div class="alert" ng-show="filledFieldsCount()==3">3 task assigned!</div>
<hr>
<pre>filledFieldsCount = {{ filledFieldsCount() | json}}</pre>
<pre>fields = {{ fields | json}}</pre>
</div>
</body>
</html>关于javascript - 检查编译了多少个字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34544736/