如何使用Angularjs在列表中使用readonly静态检查一些复选框?

时间:2016-01-22 02:58:03

标签: javascript angularjs

这是我的代码



var app = angular.module('checkbox', []);

app.controller('homeCtrl', function($scope) {
        $scope.array = [1, 5];
        $scope.array_ = angular.copy($scope.array);
       $scope.states=

[ 

  {"name":"AP",cities:[{"id":"101","name":"Vij"},{"id":"102","name":"Gnt"},{"id":"103","name":"Nell"}]} ,
  {"name":"TP",cities:[{"id":"104","name":"Hyd"},{"id":"105","name":"War"}]} ,   
  {"name":"UP",cities:[{"id":"106","name":"Kanpur"},{"id":"107","name":"Agra"},{"id":"107","name":"Noida"},{"id":"107","name":"Lucknow"}]} 


];

        $scope.childCheckChange = function (parent) {
          var allChecks = true;
          for (var i in parent.cities) {
              if (!parent.cities[i].isChecked) {
                  allChecks = false;
                  break;
              }
          }
          if (allChecks) {
              parent.isChecked = true;
          }
          else {
              parent.isChecked = false;
          }
      };

      $scope.checkChange = function (item) {
         // $scope.parentCheckChange(item.childmodules);
          for (var i in item.cities) {
              item.cities[i].isChecked = item.isChecked;
          }
             // childCheckChange(item.parent);
      };

    })
    

<div ng-app="checkbox" ng-controller="homeCtrl">
    <li ng-repeat="state in states">
                                            <input type="checkbox" ng-model="state.isChecked" ng-change="checkChange(state)" />
                                            <label>{{state.name}}</label>
                                            <ul>
                                                <li ng-repeat="city in state.cities">
                                                    <input type="checkbox" ng-model="city.isChecked" ng-change="childCheckChange(state)" />
                                                    <label>{{city.name}}</label>
                                                </li>
                                            </ul>
                                        </li>
                                        <input type="button" value="Save"/>
</div>
&#13;
&#13;
&#13;

在上面的代码中,我有一组复选框。我已经为您的选择组复选框开发了代码,默认情况下检查该组中的所有复选框,以及当用户选中所有子复选框时,默认情况下选中相关组。现在我想显示默认情况下在运行时使用readonly选择的State(TP)组复选框,并且还使用readonly从UP状态选择Kanpur和Agra城市复选框。最后,当我单击“保存”按钮时,检查的复选框是什么,获取其ID值。 这是我的jsFiddle。

http://jsfiddle.net/t7kr8/855/

0 个答案:

没有答案