如何檢查是否有任何複選框在角度檢查

Question

是否有任何功能或ng-檢查是否檢查任何顯示的複選框？

我有通過ng-click =「function（）」的值，並通過值傳遞。如果有任何值在裏面，我可以步行檢查我的數組。

我想激活/關閉「下一步」按鈕，如果任何複選框是 檢查。

什麼是最簡單的方法？

Answer 1

你可以這樣做：

function ChckbxsCtrl($scope, $filter) { 
    $scope.chkbxs = [{ 
     label: "Led Zeppelin", 
     val: false 
    }, { 
     label: "Electric Light Orchestra", 
     val: false 
    }, { 
     label: "Mark Almond", 
     val: false 
    }]; 

    $scope.$watch("chkbxs", function(n, o) { 
     var trues = $filter("filter")(n, { 
      val: true 
     }); 
     $scope.flag = trues.length; 
    }, true); 
} 

和模板：

<div ng-controller="ChckbxsCtrl"> 
    <div ng-repeat="chk in chkbxs"> 
     <input type="checkbox" ng-model="chk.val" /> 
     <label>{{chk.label}}</label> 
    </div> 
    <div ng-show="flag">I'm ON when band choosed</div> 
</div> 

工作：http://jsfiddle.net/cherniv/JBwmA/

UPDATE：或者你可以去有點不同的方式，而不使用$scope的$watch()方法，如：

$scope.bandChoosed = function() { 
    var trues = $filter("filter")($scope.chkbxs, { 
     val: true 
    }); 
    return trues.length; 
} 

而且在模板做：

<div ng-show="bandChoosed()">I'm ON when band choosed</div> 

小提琴：http://jsfiddle.net/uzs4sgnp/

Answer 2

嘗試按照模型思考，並選中複選框時該模型會發生什麼情況。

假設每個複選框綁定到字段與NG-模型然後在模型中的屬性的模型每當點擊複選框被改變：

<input type='checkbox' ng-model='fooSelected' /> 
<input type='checkbox' ng-model='baaSelected' /> 

和在控制器：

$scope.fooSelected = false; 
$scope.baaSelected = false; 

下一個按鈕應只可在某些情況下，因此NG-殘疾人 指令添加到按鈕：

<button type='button' ng-disabled='nextButtonDisabled'></button> 

現在，下一個按鈕應該只可當任fooSelected是真的還是baaSelected是真實的，我們需要關注這些領域的任何更改，以確保下一個按鈕可用與否：

$scope.$watch('[fooSelected,baaSelected]', function(){ 
    $scope.nextButtonDisabled = !$scope.fooSelected && !scope.baaSelected; 
}, true); 

上面假設只有一些複選框會影響下一個按鈕的可用性，但可以很容易地將其更改爲使用大量複選框並使用$ watchCollection檢查更改。

Answer 3

如果你不想使用觀察者，你可以做這樣的事情：

<input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'> 

Answer 4

如果您只有一個複選框，您可以使用ng-model輕鬆完成此操作：

<input type="checkbox" ng-model="checked"/> 
<button ng-disabled="!checked"> Next </button> 

並初始化Controller中的$ scope.checked（默認= false）。在這種情況下，official doc不鼓勵使用ng-init。

Answer 5

這也是插入代碼的重新發布。 此示例包括： - 一個對象列表 - 每個對象都有子列表。 例如：

var list1 = { 
    name: "Role A", 
    name_selected: false, 
    subs: [{ 
     sub: "Read", 
     id: 1, 
     selected: false 
    }, { 
     sub: "Write", 
     id: 2, 
     selected: false 
    }, { 
     sub: "Update", 
     id: 3, 
     selected: false 
    }], 
    }; 

我3名單上面的一樣，我會添加到一個對象列表

newArr.push(list1); 
    newArr.push(list2); 
    newArr.push(list3); 

然後我會做如何顯示多組複選框：

$scope.toggleAll = function(item) { 
    var toogleStatus = !item.name_selected; 
    console.log(toogleStatus); 
    angular.forEach(item, function() { 
     angular.forEach(item.subs, function(sub) { 
     sub.selected = toogleStatus; 
     }); 
    }); 
    }; 

    $scope.optionToggled = function(item, subs) { 
    item.name_selected = subs.every(function(itm) { 
     return itm.selected; 
    }) 
    $scope.txtRet = item.name_selected; 
    } 

HTML：

<li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child"> 
     <div> 
     <ul> 
      <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)"><span>{{item.name}}</span> 
      <div> 
      <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child"> 
       <input type="checkbox" kv-pretty-check="" ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span> 
      </li> 
      </div> 
     </ul> 
     </div> 
     <span>{{txtRet}}</span> 
    </li> 

小提琴：example

Answer 6

我有一個樣品與其子節點 3列出多個數據，每個列表具有屬性和子屬性：

var list1 = { 
    name: "Role A", 
    name_selected: false, 
    subs: [{ 
     sub: "Read", 
     id: 1, 
     selected: false 
    }, { 
     sub: "Write", 
     id: 2, 
     selected: false 
    }, { 
     sub: "Update", 
     id: 3, 
     selected: false 
    }], 
}; 
var list2 = { 
    name: "Role B", 
    name_selected: false, 
    subs: [{ 
     sub: "Read", 
     id: 1, 
     selected: false 
    }, { 
     sub: "Write", 
     id: 2, 
     selected: false 
    }], 
}; 
var list3 = { 
    name: "Role B", 
    name_selected: false, 
    subs: [{ 
     sub: "Read", 
     id: 1, 
     selected: false 
    }, { 
     sub: "Update", 
     id: 3, 
     selected: false 
    }], 
}; 

這些添加到陣列：

newArr.push(list1); 
newArr.push(list2); 
newArr.push(list3); 
$scope.itemDisplayed = newArr; 

在html中顯示它們：

<li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child"> 
    <div> 
     <ul> 
      <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)" /> 
      <span>{{item.name}}</span> 
      <div> 
       <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child"> 
        <input type="checkbox" kv-pretty-check="" ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span> 
       </li> 
      </div> 
     </ul> 
    </div> 
</li> 

而且這裏是檢查他們的解決方案：

$scope.toggleAll = function(item) { 
    var toogleStatus = !item.name_selected; 
    console.log(toogleStatus); 
    angular.forEach(item, function() { 
     angular.forEach(item.subs, function(sub) { 
      sub.selected = toogleStatus; 
     }); 
    }); 
}; 

$scope.optionToggled = function(item, subs) { 
    item.name_selected = subs.every(function(itm) { 
     return itm.selected; 
    }) 
} 

jsfiddle演示