在 Angularjs 中使用一组复选框

Question

我遇到了以下问题：

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

我有 2 个用例：

1）如果选中了无关紧要，其余的则不是，只要我选中另一个复选框，就会取消选中无关紧要的（这实际上是有效的）

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

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

1) 测试第一个用例： 冷漠是勾选的，一旦你点击已婚，冷漠是取消勾选，如果你再次点击已婚取消勾选，冷漠被勾选。

2) 点击 Single,Relationship and Married 来检查它们，然后检查 Indifferent 并且你点击的最后一个也被检查！

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

这是我的代码 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>  

控制器

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 );