0

I am having multiple checkbox as follows

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

User can click on any check box, finally once he click on a button I want to know what are values user checked. Can any one help me on this? Click here to see the check boxes with button

Kiran Kumar
  • 3
  • 7
  • you can add [(ngmodel)] and (change)="changed($event)" to your input element. – riteshmeher Jul 18 '17 at 15:17
  • Hey, how did it go with the answers? Did either help or do you need further assistance? :) – AT82 Jul 23 '17 at 08:23
  • 1
    @AJT_82: thanks for the answer, it worked for me, but [ngValue] is not working instead of it I used [value] – Kiran Kumar Jul 24 '17 at 10:59
  • @KiranKumar Oh, right, you are completely correct! Missed that one, yes ngValue cannot be used here, since we have bound `module.checked` which is a boolean, and even if it wasn't we wouldn't even want to bind a complete object to input (if it worked). – AT82 Jul 24 '17 at 11:05
  • @AJT_82: I want to use pipe in title of html Eg: but its not working can u help me on this? – Kiran Kumar Jul 24 '17 at 14:06

2 Answers2

1

I think the easiest way is to make the items to objects, with a new property, for example checked as the ngModel that toggles the boolean value of true when checked and vice versa.

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

template:

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

Now you can iterate that array on button click and see which objects have the checked property as true.

Edit: small change as OP noticed my error! We should use [value] instead of [ngValue]

AT82
  • 71,416
  • 24
  • 140
  • 167
-3

There are many ways to do this.If we were to use regular jquery approach set your input to

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

then you can do this for the click event

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

alternatively, take a look at this Adding parameter to ng-click function inside ng-repeat doesn't seem to work that use ng-click

Kemoy Campbell
  • 118
  • 9