Question

我有一张数据表。您可以勾选要保存的行。我遇到的问题是所有的复选框都已连接。因此，如果你检查一个，它会全部检查它们，如果你取消选中一个，那么它们都取消选中。其中一些预先检查，我传入isChecked值表示。我如何使每一个独一无二？

模板：

<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>

控制器

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')
});

Answer 1

模板：

{{#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}}

控制器：

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'));
    });
  })
});

将属性添加到项目模型或对象：

isChecked: true

应该按预期工作。

Ember复选框已连接

1 个答案: