angularjs中ng-model绑定复选框的值无法获取

作为一个angularjs的小白,今天用angularjs1.x版本开发的时候,遇到了一个问题。









     $scope.songdan=function(){
        var arr=new Array();
        console.log($scope.tiantian);
        if ($scope.tiantian==true) arr.push("tiantian");
        if ($scope.quanfeng==true) arr.push("quanfeng");
        if ($scope.yousu==true) arr.push("yousu");
        if ($scope.yuantong==true) arr.push("yuantong");
        if ($scope.zhongtong==true) arr.push("zhongtong");
        if ($scope.yunda==true) arr.push("yunda");
        if ($scope.huitong==true) arr.push("huitong");
        console.log(arr);
    };

代码是从segmentfault的问题上找的angularjs中ng-model绑定复选框的值无法获取
这样的绑定方式,angularjs不能实现双向绑定。
可以把ng-model都绑定在一个对象上进行初始化。

    $scope.type =
        all_results_checked : false
        error_results_checked : false
        authority_results_checked : false
label
    input(
        type="checkbox" ng-model="type.all_results_checked" ng-true-value="true"
        ng-false-value="false" name="all" ng-click="toggleResultsChecked('all', type.all_results_checked)"
    )
    | 全选

label.space-l
    input(
        type="checkbox" ng-model="type.error_results_checked" ng-true-value="true" ng-false-value="false" name="error" 
        ng-click="toggleResultsChecked('运行失败', type.error_results_checked)"
    )
    | 运行失败

label.space-l
    input(
        type="checkbox" ng-model="type.authority_results_checked" name="authority"
        ng-true-value="true" ng-false-value="false" ng-click="toggleResultsChecked('权限限制', type.authority_results_checked)"
    )
    | 权限限制                              

高级一点的可以修改angular本身关于input的修改(没有试过mark一下):

angular.module('core').directive('input', function () {
    return {
        priority: 1000,
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attr, ctrl) {
            if (attr.type === 'checkbox' && ctrl && attr.value) {
                ctrl.$parsers = [];
                ctrl.$parsers.push(parserFn);

                ctrl.$formatters = [];
                ctrl.$formatters.push(formatterFn);
            }

            function formatterFn(val) {
                if (angular.isString(val)) {
                    return val === attr.value;
                } else if (angular.isArray(val)) {
                    for (var i = 0; i < val.length; i++) {
                        if (val[i] === attr.value) {
                            return true;
                        }
                    }
                    return false;
                }
            }

            function parserFn(val) {
                if (angular.isString(ctrl.$modelValue)) {
                    if (ctrl.$modelValue === '') {
                        return val ? attr.value : '';
                    }
                    return val ?
                        (attr.value !== ctrl.$modelValue ? [ctrl.$modelValue, attr.value] : ctrl.$modelValue) :
                        (attr.value === ctrl.$modelValue ? '' : ctrl.$modelValue);
                } else if (angular.isArray(ctrl.$modelValue)) {
                    var $$modelValue = ctrl.$modelValue.slice(0);

                    if ($$modelValue.length === 0) {
                        if (val) {
                            $$modelValue.push(attr.value);
                        }
                        return $$modelValue;
                    }

                    var existsBool = false;
                    for (var i = 0; i < $$modelValue.length; i++) {
                        if ($$modelValue[i] === attr.value) {
                            if (val) {
                                existsBool = true;
                                break;
                            } else {
                                $$modelValue.splice(i, 1);
                            }
                        }
                    }

                    if (val && !existsBool) {
                        $$modelValue.push(attr.value);
                    }

                    return $$modelValue;
                }
                return val;
            }
        }
    };
});

你可能感兴趣的:(angularjs中ng-model绑定复选框的值无法获取)