Question

我有这个输入：

<input type="checkbox" ng-model="area.id" data-id="{{area.id}}"/>

以及上面的一些ng-click操作，我试图收集所有选中的复选框ID但是在检查操作data-id属性变为true/false之后，为什么？< / p>

来自控制器的功能：

collectSelectedAreas($event) {
    let selectedArea = $event.currentTarget.querySelectorAll('input:checked');
    let areaIds = [];

    [selectedArea].forEach((el) => {
        console.log(el.attributes['data-id'].value);
    });
}

Answer 1

选项1：

您可以选择另一个属性来跟踪复选框值（true / false），如下所示：

<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}"/>

如果选中复选框，则area.selected = true

然后在你的函数中，遍历你所在区域的数组，假设你有一个arrayOfAreas，你在ng-repeat中迭代的数组

collectSelectedAreas() {    
    let areaIds = [];

    arrayOfAreas.forEach((el) => {
        if (el.selected){
           areasId.push(el);//Add selected element to array
           console.log(el.id);
        }
    });
}

选项2：

<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}" ng-true-value="area.id" ng-false-value="'NO'"/>

这意味着当复选框为checked时，area.selected将采用area.id值，否则字符串为＆＃39; NO＆＃39;;

Answer 2

您无需访问DOM以获取所选复选框。您可以通过检查模型值area.id来检查这一点。如果选中复选框，它将包含true。然后你可以遍历area对象，在那里你可以获得密钥以识别所选复选框的id。对于例如。

<input type="checkbox" ng-model="area.id" />

其中

$scope.area.id==true if checkbox is selected.

在AngularJS中的事件调用之后，数据属性变为true

2 个答案: