Question

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

我只用四个字段给HTML，但实际上是20个字段（我从角材料网站获取代码）。

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

有办法做类似的事吗？谢谢你的建议。

Answer 1

下面你可以看到我提出的解决方案。

简要说明：我使用数组作为字段的模型，因此<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>

检查编译的字段数

1 个答案: