Question

我正在尝试在Angular中切换ng-selected选项，但遇到了一些困难。这是我正在尝试的：

<select ng-model="datacut.ages" multiple>
   <option value="" disabled="disabled">Please Select</option>
   <option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
   <option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
   <option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>

控制器：

$scope.toggleSelect = function(dc, str){
    dc.ages.splice(dc.ages.indexOf(str), 1);
    //e.currentTarget.selected = !e.currentTarget.selected;
};

问题在于，当我点击一个选项时，会在mousedown上被选中，并且在释放时会取消选择。注释掉的代码也做了同样的事情。

我觉得这应该有一个简单的解决方案，但我无法找到一个优雅的解决方案。

非常感谢任何帮助。

编辑：为了澄清 - 我需要能够没有选择任何内容，因此单击一个选定的元素需要取消选中它。我还需要能够选择多个选项。

Answer 1

你正在使用ng-model为你带来魔力。因此，ng-click和ng-selected不是必需的。查看我的工作fiddle

<select ng-model="datacut.ages" multiple>
  <option value="" disabled="disabled">Please Select</option>
  <option ng-value="'0-15'">15 and Younger</option>
  <option ng-value="'16-19'" >16 - 19</option>
  <option ng-value="'20-24'" >20 - 24</option>
</select>

Answer 2

您似乎想从年龄模型中删除所选年龄。然后你需要使用ng-change指令。并删除ng-click或ng-selected。但是让ng-model访问删除所选项的方法的值。查看我的plunker

 <select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
        <option value="" disabled="disabled">Please Select</option>

        <option ng-repeat="age in datacut.ages" value="{{age}}">
          {{age}}
        </option>
      </select>

编辑：这应该在指令中进行，因为您需要更新选项html以取消选择该选项。

切换ng-selected

2 个答案: