AngularJs 中的CheckBox前后台交互

前台页面：

 <div class="form-group">
            <label for="CompanyName" class="col-sm-3 control-label">产品相斥：</label>
            <div class="col-sm-9">
                <span ng-repeat="proRadio in proRadios">
                    <input id="{{proRadio.ProductID}}" type="checkbox" name="{{proRadio.ProductName}}" value="{{proRadio.ProductID}}" 
                          ng-click="updateSelection($event,proRadio.ProductID)" ng-checked="isSelected(proRadio.ProductID)" />

                    <label for="{{proRadio.ProductID}}">{{proRadio.ProductName}}</label>
                </span>
                
            </div>
        </div>

解释：这里的checkBox是动态加载的，proRadios在控制器中通过$scope.proRadios=……进行赋值，这里关键的两个方法ng-click与ng-checked

ng-click:调用方法将复选框的选中的集合进行更新操作，以便传入后台。

ng-checked：调用的方法返回true或false来决定复选框的选中状态。

控制器（Controller）中：

 //复选框设置
    var IDs = product.ProductMutex.split('|');
    //初始化数据将数据库里查询出来的数据存放到集合 $scope.selected中
    $scope.selected = [];
    for (var i in IDs) {
        if (IDs != "")
        {
            $scope.selected.push(IDs[i]);
        }
    }

    var updateSelected = function (action, id, name) {
        id = "" + id + "";
        if (action == 'add' && $scope.selected.indexOf(id) == -1) {
            $scope.selected.push(id);
        }
        if (action == 'remove' && $scope.selected.indexOf(id) != -1) {
            var idx = $scope.selected.indexOf(id);
            $scope.selected.splice(idx, 1);
        }
        //alert($scope.selected);
    }
    //判断是在集合$scope.selected里去掉此id，还是加上id
    $scope.updateSelection = function ($event, id) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        updateSelected(action, id, checkbox.name);
    }
    //设置复选框的选中状态
    $scope.isSelected = function (id) {
        id = "" + id + "";//因为$scope.isSelected中的数据是字符串，所以将数字装换成字符串
        return $scope.selected.indexOf(id) >= 0;
    }

最后的操作数据都存放到$scope.selected中了，在存入数据库就OK了。

 

注：仅个人笔记及总结，有误的地方请各位指正！