

お世話になります。

jsonのデータをng-repeatでcheckbox付のリストに表示させています。

checkboxにチェックを入れた際に下記コード内の  
「＜ここにチェックされた数をいれたい＞」に  
チェックされている数が動的に表示されるようにしたいと思っています。  
（初期値0）

[code]

    <html lang="ja" ng-app="MyApp">
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <meta name="mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
        <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="components/monaca-onsenui/js/angular/angular.js"></script>
        <script src="components/angular-resource/angular-resource.min.js"></script>
        <script src="components/monaca-onsenui/js/onsenui.js"></script>
    
    
        <script language="javascript">
        var module = angular.module('MyApp', ['onsen', 'ngResource']);
        module.controller('UserController',
            function UserController($scope, $resource) {
             //アイテム抽出
                $scope.getItemList = function() {
                    $resource("item2.json").get(function(data) {
                        $scope.xxxList = data.xxx;
                    });
                }
            }
        );
    
        </script>
    
        <title>チェック数</title>
    </head>
    <body>
    <!--トップページ-->
    <ons-navigator title="Navigator" var="myNavigator">
        <ons-page>
          <ons-toolbar>
            <div class="center">検索</div>
          </ons-toolbar>
    
    <div class="container" ng-controller="UserController">
     <div>＜ここにチェックされた数をいれたい＞／{{bukiList.length}}</div>
           <ons-list class="dl-horizontal" class="example-animate-container" ng-init="getItemList()">
             <ons-list-item  modifier="tappable" ng-repeat="item in xxxList | filter:q">
               <ons-row>
                 <ons-col width="30px"> 
                   <div></div>
                 </ons-col>
                 <ons-col>
       <!--[{{$index + 1}}]--><label class="checkbox">
         <input type="checkbox" ng-model="check1Selected" ng-change="onCheckBoxChange()" >
         <div class="checkbox__checkmark"></div>
         <span class="ons-checkbox-inner">{{item.id}}{{item.name}}</span>
       </label> 
                 </ons-col>
               </ons-row>
             </ons-list-item>
           </ons-list>
        </div>
        </ons-page>
    </ons-navigator>
    </body>
    </html>
[/code]

item2.jsonは以下のような記載としています。

[code]

    {
        "xxx": [
            { "id": "1",  "name": "aaa",  "syurui": "ccc"}, 
            { "id": "2",  "name": "bbb",  "syurui": "ccc"}
        ]
    }
    
[/code]

ご教示いただけますと幸いです。  
よろしくお願いいたします。


CC BY-SA 3.0
2015-08-02T08:37:42.250
12947
2015-11-30T16:24:21.453
2015-09-01T13:58:20.177
2238
10558
question
angularjs
ng-repeatで作ったcheckbox付リストで、チェックされた数を取得したい


`ng-model`に`item.checked`を指定し、`$scope.countChecked()`で数えています。

[code]

    <html lang="ja" ng-app="MyApp">
    <head>
        <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
        <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="components/monaca-onsenui/js/angular/angular.js"></script>
        <script src="components/angular-resource/angular-resource.min.js"></script>
        <script src="components/monaca-onsenui/js/onsenui.js"></script>
    
    
        <script language="javascript">
        var module = angular.module('MyApp', ['onsen', 'ngResource']);
        module.controller('UserController',
            function UserController($scope, $resource) {
    
        //アイテム抽出
                $scope.getItemList = function() {
                    $resource("item2.json").get(
                            function(data) {
                                $scope.xxxList = data.xxx;
                            });
                }
    
                $scope.countChecked = function(){
                  if(angular.isArray($scope.xxxList)){
                    return $scope.xxxList.filter(function(item){
                      return item.checked;
                    }).length;
                  }else{
                    return 0;
                  }
                };
            }
    );
    
        </script>
    
        <title>チェック数</title>
    </head>
    <body>
    <!--トップページ-->
    <ons-navigator title="Navigator" var="myNavigator">
        <ons-page>
          <ons-toolbar>
            <div class="center">検索</div>
          </ons-toolbar>
    
    <div class="container" ng-controller="UserController">
        <div>{{countChecked()}}／{{bukiList.length}}</div>
              <ons-list class="dl-horizontal" class="example-animate-container" ng-init="getItemList()">
                <ons-list-item  modifier="tappable" ng-repeat="item in xxxList | filter:q">
                  <ons-row>
                    <ons-col width="30px"> 
                      <div></div>
                    </ons-col>
                    <ons-col>
                <!--[{{$index + 1}}]--><label class="checkbox">
                  <input type="checkbox" ng-model="item.checked" ng-change="onCheckBoxChange()" >
                  <div class="checkbox__checkmark"></div>
                  <span class="ons-checkbox-inner">{{item.id}}{{item.name}}</span>
                </label> 
                    </ons-col>
                  </ons-row>
                </ons-list-item>
              </ons-list>
        </div>
        </ons-page>
    </ons-navigator>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-08-02T11:50:32.503
12949
2015-08-02T11:50:32.503
8532
12947
answer