AngularJSを使用して有効な値を選択したSELECT要素の数を表示

Question

3つのドロップダウンボックスとラベルがあります。値を持つSelectボックスの数を表示する必要があり、ユーザがリセット（空のエントリを選択）するたびにカウントを再計算するか、AngularJSを使用してドロップダウンボックスの値を選択する必要があります。

これを行う方法AngularJS？

Answer 1

モデルを確認し、以下のようにカウントを返すだけの方法があります。

選択したすべての値を保持するオブジェクトを持つことができます。

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>