Question

我遇到以下问题：

我有一组复选框和一个无关紧要的检查，如果检查无关，则在数据库中保存一个空数组。

我有2个用例：

1）如果检查无关紧要，其余的不是，一旦我检查另一个复选框无关紧要（未实际工作）

2）如果我选择所有复选框（除了无关紧要），都应该取消选中并且应该检查无关紧要。（这不起作用）

这是我的代码的摘录 http://jsfiddle.net/ngbYW/

1）测试第一个用例：只要你点击已婚，就无动于衷，如果你再次点击已婚，取消选中，则检查无关紧要。

2）点击Single，Relationship和Married来检查它们，然后检查无关紧要并检查你点击的最后一个！

希望我足够清楚。我做错了什么？任何帮助或建议将不胜感激。

这是我的代码 HTML

<div ng-app="">
<div ng-controller="MyCntrl">

    <label class="control-label">Family status</label>
    <div class="controls">
        <label class="checkbox inline" ng-repeat="item in familystatus"><input type="checkbox"  ng-click="addToSearchedProfile(item.id,'familystatus')" ng-checked="isChecked(item,'familystatus')" >{{item.text}}</label>

        <label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'familystatus')" ng-checked="userSearchedProfile.familystatus.length=='0'">indifferent</label>
    </div>
    <label class="control-label">Sexuality</label>
    <div class="controls">
        <label class="checkbox inline" ng-repeat="item in sexuality"><input type="checkbox"  ng-click="addToSearchedProfile(item.id,'sexuality')" ng-checked="isChecked(item,'sexuality')" >{{item.text}}</label>
        <label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'sexuality')" ng-checked="userSearchedProfile.sexuality.length=='0'">indifferent</label>
    </div>
    </div>
</div>

CONTROLLER

function MyCntrl($scope) {
    $scope.familystatus = [{id:1,text:'Heterosexual'},{id:2,text:'Bisexual'},{id:3,text:'Homosexual'}];
    $scope.sexuality = [{id:1,text:'Single'},{id:2,text:'Relationship'},{id:3,text:'Married'}];

    $scope.userSearchedProfile = {
        familystatus : [1],
        sexuality : []
    };

    $scope.isChecked = function(item, type) {
        return $scope.userSearchedProfile[type].indexOf(item.id)!==-1;
    };

    $scope.addToSearchedProfile = function(id, item) {
        if (angular.isUndefined(id)) {
            $scope.userSearchedProfile[item].length=0;
            return;
        }
        if ($scope.userSearchedProfile[item].indexOf(id) === -1) {
            $scope.userSearchedProfile[item].push(id);
        } else {
            $scope.userSearchedProfile[item].splice($scope.userSearchedProfile[item].indexOf(id), 1);
        }
        if ($scope[item].length === $scope.userSearchedProfile[item].length){
            $scope.userSearchedProfile[item].length=0;
        }
    };

}

Answer 1

相互制约/反作用的表格元素非常令人困惑也给我。我通常通过定义视图模型来攻击这种问题表示表单状态并让javascript代码处理协调而不是对个别事件做出反应。

这是简化示例：http://jsfiddle.net/4TBFn/

模板中的

：

<label class="checkbox inline" ng-repeat="item in sexuality">
  <input type="checkbox"  ng-model="item.selected"/>{{item.text}}
</label>
<label class="checkbox inline">
  <input type="checkbox"  ng-model="indifferent"/>indifferent
</label>

控制器中的

：

$scope.$watch('indifferent', function(v) {
    if (!v) return;
    for ( var i = 0; i < $scope.sexuality.length; ++i ) {
        $scope.sexuality[ i ].selected = false;
    }
});

$scope.$watch('sexuality', function(arr) {
    var selected = arr.reduce(function(s, c) { return s + (c.selected ? 1 : 0); }, 0);
    if ( selected === arr.length ) {
        $scope.indifferent = true;
    } else if ( selected > 0 ) {
        $scope.indifferent = false;
    }
}, true );

在Angularjs中使用一组复选框

1 个答案: