Angular獲取選中的複選框

我有一個使用角度動態填充複選框的列表。Angular獲取選中的複選框

<div ng-repeat="X in XList"> 
    <label>{{X.Header}}</label> 
    <input type="checkbox" name="X" value="{{X.Item.Id}}" /> 
    <p>{{X.Header}}</p> 
</div>

我想要一個方法來檢索所有選中的複選框的列表。通常我會用

$('input[name=checkboxlist]:checked').each(function() 
{ 
}

但是，這並不具有角接受....那麼，有沒有一種合適的方法來做到這一點？

來源

2013-08-07 Sana Joseph

這裏是實現plunker

<input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}} 

$scope.ShowSelected = function() { 
    console.log($scope.selected); 
    alert(JSON.stringify($scope.selected)); 
};

來源

2013-08-07 10:18:48

這很棒，但是當我檢查其中一個複選框時，會出現以下消息：錯誤：無法將undefined轉換爲對象 –

我沒有得到您想說的內容，您能否詳細說明在哪種情況下出現錯誤？我在選擇複選框時看不到任何錯誤。 –

是的，在你的代碼中它很好用，但是當我在代碼中添加「ng-model = selected []」時，當我嘗試選擇其中一個複選框時，我收到該錯誤。 –

您可以使用ng-model指令將屬性直接綁定到元素。

例如

<input type="checkbox" ng-model="X.Item.Id" />

這將更新您的模型。

由此您將能夠檢查您的模型中的值並查看哪些被檢查。

例如

angular.forEach($scope.yourModelItems, function(item){ 
    // item.value ? 0 : 1; 
});

查看ngModel的文檔。 angularjs.org主頁上的ToDo列表示例也說明了這一點。

p.s.在附註中，您還可以在之前添加data-以使您的角度指令html5變得友好。例如data-ng-model="X.Item.Id"

來源

2013-08-07 10:16:55

非常感謝按鈕，會是可能的，如果你提到檢查方法？ –

你需要發佈你的模型的代碼，所以我可以看到值。 –

然後採取行動

<button ng-click="get_all_cheked()">Get checked</button>

，然後在控制器

$scope.selected = {}; 
$scope.get_all_cheked=function() { 
console.log("click"); 
console.log($scope.selected); 
}

來源

2017-10-31 08:03:52 Leo

Angular獲取選中的複選框

回答

相關問題