使用切换方法选择具有条件的多个元素

Posted 2021-05-06

在我的名单中，我有超过5个水果。用户可以选择最多5个水果。一旦5个水果到达，我想向他们展示一个alert，说你的5个选择结束了。

此外，用户可以通过再次单击（切换）取消选择已经选择的水果

怎么实现这个？

控制器：

import Ember from 'ember';

export default Ember.Controller.extend({
  selectedIndex:null,
  appName: 'Ember Twiddle',
   actions:{
    select:function(index){
     console.log('index is', index );
    }
  }
});

这是我的尝试：Live Demo

有人帮我吗？

答案

您需要创建一个选定索引的数组并从那里开始。

import Ember from 'ember'

export default Ember.Controller.extend({
  appName: 'Twiddle',

  selected: [],

  actions: {
    toggle(index) {
      const indexOf = this.selected.indexOf(index)

      if (indexOf >= 0) {
        this.selected.splice(indexOf, 1)
      } else {
        if (this.selected.length >= 5) {
          return alert('You cannot select more than 5 fruits')
        }

        this.selected.push(index)
      }

      this.notifyPropertyChange('selected')
    }
  }
})

旋转：https://ember-twiddle.com/39ed50c0d4aae9c45c8ad05690ddac28