代码之家 › 专栏 › 技术社区 › Dinesh N.K

Internet Explorer 11-无法选中angular 5中的“输入类型”复选框

angular5 internet-explorer-11 input checkbox angular

2

Dinesh N.K · 技术社区 · 7 年前

使用输入类型复选框和ngmodel、ngmodelchange,选中角度的属性。请检查以下内容。

<input type="checkbox" [checked]="item.selected" [(ngModel)]="item.selected"/>

Checkbox在google chrome和firefox中运行良好,但当我在IE11中测试时,我无法选中该复选框。

但当我连续双击时,复选框被选中。

注意:默认html5复选框按预期工作

<input type="checkbox" name="checkme">

在IE 11中,我可以通过单击复选框来检查我的任何想法。任何面临此问题的人,如果有人修复了此问题,请告诉我。

提前谢谢。

3 回复 | 直到 7 年前

1

standby954 7 年前

是否对项使用布尔值。已选择? 也许可以尝试将其设置为字符串“checked”。

2

0

Dharman vijay 6 年前

我和AngularJS也有类似的问题

我有一个 ng-repeat 对于要显示数据的表行和表行内部,我还有一个复选框。用户可以单击复选框或行本身,将其作为要包括的选项的一部分进行选择(在将这些选项带到应用程序的下一阶段之前)

<tr ng-repeat="obj in new_add_ons track by $index" ng-class="{selected: obj.Selected}" ng-click="click_table_row('new_add_ons',$index)">
    <td style="width:5px; padding: 0px !important;">
        <div class="form-check">
            <input class="form-check-input checkbox" type="checkbox" ng-click="$event.stopPropagation();" ng-model="obj.Selected" id="{{'defaultCheck' + $index}}">
        </div>
    </td>
    <td>{{obj.QTY}}</td>
    <td>{{obj.PN}}</td>
    <td>{{obj.DESC}}</td>
    <td>{{obj.NOTES}}</td>
</tr>

使用Chrome,我不需要 ng-click 输入标记上的属性- ng-model 足以将复选框状态(选中或未选中)链接到数据(对象数组,每个对象都选择了true或false)。正如你所观察到的,我需要用IE11双击,但用Chrome等只需单击一次。

添加后 ng单击 具有的事件 $event.stopPropagation(); 在IE和chrome中,输入功能与预期一致。

发生的情况是,当用户单击复选框时,它还触发了行单击事件,并且由于该事件切换obj。选定状态-本质上它切换了两次-一次从复选框本身,然后通过行单击事件返回到原始值。通过运行 $事件。stopPropagation(); 每次单击复选框时,将不会触发行单击事件,结果是我们所期望的结果。

3

0

María Cristina Fernández López 4 年前

这是因为财产 [(ngModel)]="item.selected" 如果你只把财产 [checked]="item.selected" 工作正常。