Javascript 检查编译了多少字段

我在使用angularjs和角度材质时遇到问题。 在一个表单中，我有二十个选择字段。我必须监视所有字段，因为我必须允许用户只编译二十个字段中的三个。如果用户试图编译第四个字段，则该字段必须返回空白（无值选择）

我给出的HTML只有四个字段，但实际上有20个字段（我从AngularMaterial站点获取代码）

有没有办法做类似的事情？

---

感谢您的建议。

下面您可以看到我在工作中提出的解决方案

简要说明：我使用数组作为字段的模型，因此

指令由ng repeat循环生成。具体来说，每个select元素的模型是字段项（数组的每个项）的value属性

（'fields'，…）检查数组更改，其侦听器对已填充的字段进行计数（使用函数

filledFieldScont（）

）并验证计数是否等于允许的最大值

请注意，$watch将第三个参数设置为true，以便深入监视数组项属性中的更改：

$scope.$watch（'fields'，listener，true）


angular
.module（'MyApp'，['ngMaterial'，'ngMessages']））
.controller（'AppCtrl'，函数（$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=函数（）{
//使用超时来模拟250ms的请求。
返回$timeout（函数（）{
$scope.users=$scope.users |124;[
{id:1，名称：'Scooby Doo'}，
{id:2，名字：'Shaggy Rodgers'}，
{id:3，名字：'Fred Jones'}，
{id:4，名字：'Daphne Blake'}，
{id:5，名字：'Velma Dinkley'}
];
}, 250);
};
$scope.$watch（'fields'，函数（newValue，oldValue）{
控制台日志（“$watch”）；
如果（$scope.filledfieldscont（）==$scope.maxNrFields）{
angular.forEach（$scope.fields，function（field）{
如果（！field.value）field.enabled=false；
});
}
}，对）；
$scope.filledFieldScont=函数（）{
var计数=0；
angular.forEach（$scope.fields，function（field）{
计数+=字段值？1:0；
});
返回计数；
}
});
.alert{
文本对齐：居中；
宽度：100%；
颜色：红色；
}

{{user.name}
分配3个任务！

FilledFieldScont={{FilledFieldScont（）| json}}
字段={fields | json}
为什么不使用数组作为字段的模型，使用$watch（'yourarray'，…）或使用$watchCollection（'yourarray'，…）检查数组更改？这需要某种解释。是的，你是对的。我将编辑我的答案并解释一些问题details@beaver是的，回答得好！我有个问题。。如果一个项目只能在一个字段中选择，我该怎么办？例如：如果我在第二个字段中选择“Fred Jones”，则我无法在第四个字段中重新选择“Fred Jones”。也许您可以使用with ng repeat，其中适当的表达式仅筛选尚未选择的用户。例如，请参见此答案和此处引用的小提琴：
<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>

  $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);
  };
});