CODEWITHSUNDEEP
ember.jscheckboxember-dataember-cli
campatsky
campatsky

Reputation: 324

Ember checkboxes are connected

I have a table of data. You can checkmark the rows you want to save. The problem I have is that all the checkboxes are connected. So if you check one, it checks them all and if you uncheck one then they all uncheck. Some of them come pre-checked and I'm passing in the isChecked value to indicate that. How do I make each one unique?

Template:

<table>
  <thead>
        <tr>
            <th class="center"><br>Select<br> {{input type="checkbox" checked=allChecked}}</th>
            <th class="center">
                <a href="#" {{action 'sortBy' 'itemId'}} {{bind-attr class="itemId:active sortAscending:asc:desc"}}>ID</a>
            </th>
            <th class="">
                <a href="#" {{action 'sortBy' 'description'}} {{bind-attr class="description:active sortAscending:asc:desc"}}>Item Description</a>
            </th>
            <th>{{!-- actions --}}</th>

        </tr>
    </thead>

{{#each item in pagedContent}}
        <tr>
            <td class="center">{{input type="checkbox" checked=isChecked name=item.itemId}}</td>
            <td class="center">{{item.itemId}}</td>
            <td class="">{{item.description}}</td>
        </tr>
{{/each}}
</tbody>
</table>

Controller

import Ember from 'ember';
import pageableTable from 'web-app-admin/mixins/pageable-table';

export default Ember.ArrayController.extend(pageableTable, {
  isChecked: true,
  allChecked: true,
  allCheckedToggle: function(){
      if(this.get('allChecked') === false){
        this.set('isChecked', false);
      }
      else{
        this.set('isChecked', true);
      }
  }.observes('allChecked')
});

Upvotes: 2

Views: 244

Answers (1)

Daniel
Daniel

Reputation: 18682

Template:

{{#each pagedContent key='itemId' as |item|}}
        <tr>
            <td class="center">{{input type="checkbox" checked=item.isChecked name=item.itemId}}</td>
            <td class="center">{{item.itemId}}</td>
            <td class="">{{item.description}}</td>
        </tr>
{{/each}}

Controller:

import Ember from 'ember';
import pageableTable from 'web-app-admin/mixins/pageable-table';

export default Ember.ArrayController.extend(pageableTable, {
  allChecked: true,
  allCheckedToggle: Ember.observer('allChecked', function() {
    this.get('pagedContent').forEach(function (item) {
      item.set('isChecked', this.get('allChecked'));
    });
  })
});

And add property to item Model or object:

isChecked: true

Should work as expected.

Upvotes: 2

Related Questions