顯示使用AngularJS選擇的具有有效值的SELECT元素的計數

Question

我有3個選擇下拉框和一個標籤。我需要顯示其中有值的選擇框的計數，並且需要在用戶重置（選擇空白條目）時重新計算計數，或使用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>