AngularJS：指望改变所选项目 [英] AngularJS: count selected items on change

问题描述

我有一些自定义控件的形式。在这种形式下，我需要显示numRequired的numSelected。我知道numRequired，但我怎么能弄清楚numSelected？

I have a form with some custom controls. At the bottom of this form, I need to display "numSelected of numRequired". I know "numRequired", but how can I figure "numSelected"?

的形式看起来是这样的：

The form looks something like this:

<div ng-controller="MyCtrl">
    <fieldset ng-repeat="item in items">
        <div class="buttons" ng-init="selectedVal=1">
            <label>
                <input type="radio" name="item{{$index}}" ng-model="selectedVal" value="1" ng-selected="selectedVal==1">
            </label>
            <label>
                <input type="radio" name="item{{$index}}" ng-model="selectedVal" value="0" ng-selected="selectedVal==0">
            </label>
        </div>
    </fieldset>
    <div>{{numSelected}} of {{numRequired}}</div>
</div>

我试过搭售 NG-点击和 NG-变化来的每个输入和做在计数 MyCtrl ，但我想我不知道怎么算符合条件的，一旦我在那里我的项目。

I've tried tying ng-click and ng-change to each input and doing the counting in MyCtrl but I guess I don't know how to count items which meet conditions once I'm in there.

推荐答案

请计数范围

 $scope.count = 0;
    $scope.selectedIndex = {};
    $scope.count = function (index){
        $scope.selectedIndex[index] = 1;
        updateCount();
    }
    $scope.uncount = function (index){
        delete  $scope.selectedIndex[index];
        updateCount();
    }
    function updateCount(){
            var element_count =0;
             for (e in $scope.selectedIndex)
              { 
                element_count++; 
              }
         $scope.count = element_count;
    }

和NG-点击如下

  <input type="radio" ng-click="count({{$index}})" name="item{{$index}}" ng-model="selectedVal" value="1" ng-selected="selectedVal==1">

 <input type="radio" ng-click="uncount({{$index}})" name="item{{$index}}" ng-model="selectedVal" value="1" ng-selected="selectedVal==1">

在这里显示计数

<div>{{count}} of {{numRequired}}</div>

或您可以直接使用更改计数NG-更改

<input type="radio" ng-change={{count + 1}} name="item{{$index}}" ng-model="selectedVal" value="1" ng-selected="selectedVal==1">

<input type="radio" ng-change={{count -1}} name="item{{$index}}" ng-model="selectedVal" value="1" ng-selected="selectedVal==1">

这篇关于AngularJS：指望改变所选项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！