一組複選框的

林具有以下問題：一組複選框的

我有一組複選框和一個淡漠檢查過，在如果淡漠被選中然後空數組被保存到數據庫中。

我有2個用例：

1）如果無動於衷被選中，其餘的是不是，只要我檢查另一複選框冷漠未被選中（這實際上是工作）

2）如果我選中所有複選框（除了無差異），都應該取消選中並且應該檢查無差異。（這是不工作）

這裏是我的代碼 http://jsfiddle.net/ngbYW/

1）來測試第一個使用案例的摘錄：當你點擊已婚冷漠的檢查，儘快，淡泊未被選中，如果u點擊再次在結婚時取消選中，冷漠被檢查。

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

}

來源

2013-05-30 user2435218

間限制/反作用的表單元素都非常混亂對我來說太。我通常通過定義視圖模型來攻擊這類問題，該視圖模型代表表單狀態，並讓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-30 23:22:59 Tosh

一組複選框的

回答

相關問題