切换 ng-selected

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

问题是当我点击一个选项时，鼠标按下时被选中，而释放时被取消选中。注释掉的代码也做同样的事情。

我觉得这应该有一个简单的解决方案，但我真的想不出一个优雅的解决方案。

任何帮助将不胜感激。

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

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 以取消选择该选项。