AngularJS:如何在复选框select / unselect上更新$ scope关联数组的键?

时间:2016-12-31 11:29:59

标签: javascript angularjs json

我的PHP编程通过AJAX返回JSON,这是在scrope变量$scope.roleAssigned中设置的,然后最终生成一个带有表和复选框的Accordian

$json2 = '{"status":"OK","data":[{"label":"Admin","id":1,"rights":[{"id":"1","label":"create","selected":"1"},{"id":"2","label":"update","selected":"0"},{"id":"3","label":"delete","selected":"0"},{"id":"4","label":"lists","selected":"0"}]},
{"label":"Normal User","id":2,"rights":[{"id":"1","label":"create","selected":"1"},{"id":"2","label":"update","selected":"1"},{"id":"3","label":"delete","selected":"1"},{"id":"4","label":"lists","selected":"0"}]}]}';

现在点击按钮我想用JSON将相同的数据发回给PHP。 selected字段告诉是否有人点击了复选框。因此,例如{"id":"1","label":"create","selected":"1"}可以是{"id":"1","label":"create","selected":"0"}

是否有任何Angular方式更新复选框点击范围数组的键?我不想生成迭代DOM(jQuery方式)。

HTML

<div class="dynamic" ng-repeat="role in roles | orderBy:sortType:sortReverse | filter:queryRoles ">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title text-center">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse_{{role.id}}">
                                    {{role.label}}
                                </a>
                            </h2>

                        </div>
                        <div id="collapse_{{role.id}}" class="panel-collapse collapse">
                            <div class="panel-body text-center">
                                <table id="roles-table" class="table table-striped" align="center">
                                    <thead>
                                        <tr>
                                            <td>Droit</td>
                                            <td>Action</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="right in role.rights">
                                            <td>{{right.label}}</td>
                                            <td>
                                                <input data-rid="{{role.id}}" type="checkbox" ng-checked="right.selected == 1">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

如果可能,请告诉我。

1 个答案:

答案 0 :(得分:1)

  

您可以使用$ parent。$ index和$ index

<input data-rid="{{role.id}}" type="checkbox" ng-checked="right.selected == 1"    ng-click="checkIt($parent.$index, $index, right.selected)">   

$scope.checkIt= function(parentIndex, index, selected){
      selected = (selected === "1") ? "0" : "1";
      $scope.roles[parentIndex].rights[index].selected = selected;
   };