1

我有以下问题：

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

我有 2 个用例：

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

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

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

1) 测试第一个用例： 无差别被选中，一旦你点击已婚，无差别被取消选中，如果你再次点击已婚取消选中，无差别被选中。

2）点击单身，关系和已婚让他们检查，然后检查冷漠，你点击的最后一个也被检查！

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

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

}
4

1 回答 1

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 );
于 2013-05-30T23:22:59.897 回答