切换ng-selected

Question

切换ng-selected

3

我正在尝试在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;
};

问题在于，当我点击一个选项时，它会在鼠标按下时被选中，在释放时取消选中。注释掉的代码也是一样的。

我感觉这应该有一个简单的解决方案，但我实在无法想出一种优雅的解决方案。

任何帮助都将不胜感激。

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

- Dave M

你为什么要用 toggleSelect？那个函数会从模型中移除你的选择，也就是说这个选项永远不会被选中，因此被取消选择。如果你删除 ng-click 和所有 ng-selected，它就可以正常工作。 - logee

是的，我会添加一个编辑以进行澄清，但我希望能够取消选择某些内容（使没有任何内容被选中）。 - Dave M

2个回答

0

看起来你想从年龄模型中删除所选的年龄。那么你需要使用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以取消选择该选项。

- Raulucco

是的，这就是 splice 的作用，它从数组中删除项目，并且我从控制器的年龄属性创建组合框的选项。 - Raulucco

好的。我需要在列表中保留所有可能性。我曾尝试使用splice从相关的ng-model中移除它们（这将导致它们无法被选中）。 - Dave M

我很困惑。如果你知道一个选项不应该可选择，为什么不直接禁用它呢？这难道不是更好的选择吗？ - Raulucco

所有选项都是“可选择的”。我只想能够单击所选选项并取消选择它。除非我得到一个好的解决方案，否则我可以使用命令单击来完成它。 - Dave M

@Dave M，所以我将实现更改为指令，因为具有“错误”值的选项必须手动取消选择。 - Raulucco

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christoph · Accepted Answer

您正在使用 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>