Question

我有3个选择下拉框和一个标签。我需要显示其中有值的Select框的计数，并且需要在用户重置时重新计算计数（选择空条目）或使用AngularJS选择下拉框的值。

如何在AngularJS中执行此操作？

Answer 1

只需在span中有一个方法来检查模型并返回如下计数。

您可以让对象保存所有选定的值。

var app = angular.module('app', []);

app.controller('TestController', function($scope) {
   $scope.models = {};
   
   $scope.count = function() {
     var count = 0;
     
     angular.forEach($scope.models, function(val, key) {
       if(val) ++count;
     });
     
     return count;
   };
});


angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController">
  <select ng-model="models.model1">
    <option value=""></option>
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
    <option value="2">Option 3</option>
  </select>
  <select ng-model="models.model2">
    <option value=""></option>
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
    <option value="2">Option 3</option>
  </select>
  <select ng-model="models.model3">
    <option value=""></option>
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
    <option value="2">Option 3</option>
  </select>
  <p>
    <span>{{count()}}</span>
  </p>
</div>

显示使用AngularJS选择有效值的SELECT元素的计数

1 个答案: