Question

我有多个复选框，如下所示

moduleNameList = ['test1', 'test2', 'test3', 'test4']
<li *ngFor="let module of moduleNameList">
<input [value]="module" type="checkbox"> {{module}}<br>
</li>

用户可以单击任何复选框，最后一旦他点击按钮我想知道用户选中的值是什么。谁可以帮我这个事？ Click here to see the check boxes with button

Answer 1

我认为最简单的方法是使用新属性将项目设置为对象，例如checked作为ngModel，在选中时会切换true的布尔值。反之亦然。

moduleNameList=[{name:'test1', checked: false},{name:'test2', checked: false},
                 {name:'test3',checked:false}]

模板：

<li *ngFor="let module of moduleNameList">
  <input [value]="module" type="checkbox" [(ngModel)]="module.checked"> 
    {{module.name}}
</li>

现在，您可以在按钮单击时迭代该数组，并查看哪些对象的checked属性为true。

编辑：因OP发现我的错误而发生的小变化！我们应该使用[value]代替[ngValue]

Answer 2

有很多方法可以做到这一点。如果我们要使用常规的jquery方法，请将输入设置为

<input class="foo" [value]="module" type="checkbox"> {{module}}<br>

然后你可以为点击事件

执行此操作

<script>
        $('.foo').click(function(e)
         {
            var value = $(this).val();
            alert(value);
         });
</script>

或者，看一下使用ng-click

的Adding parameter to ng-click function inside ng-repeat doesn't seem to work

如何知道是否在角度2中单击了复选框

2 个答案: