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了。

 

注：僅個人筆記及總結，有誤的地方請各位指正！