Question

我有一个连接到模型的多重选择。我想添加一个不属于模型并处理click事件的附加选项。这可能吗？怎么样？

    Language:
    <select multiple name="Language_Custom" 
        ng-model="model.Language_Custom" 
        ng-required="true" 
        ng-options="pn.Value as pn.Label for pn in Language_Custom_PossibleValues">    
    </select>

Answer 1

创建一个函数，该函数返回Language_Custom_PossibleValues数组的副本，并将附加选项附加到该数组。这使您可以在不更改基础模型的情况下添加选项。

$scope.getLanguages = function(){
    var languages = [];
    angular.forEach($scope.Language_Custom_PossibleValues, function(item){
      languages.push(item);
    });
    languages.push({Value: 0, Label: 'Extra Option'});
    return languages;
}

现在使用该功能作为ng-options：

中的来源

Language:<select multiple name="Language_Custom" 
   ng-model="model.Language_Custom" 
   ng-required="true" 
   ng-options="pn.Value as pn.Label for pn in getLanguages()"
   ng-change="changeLanguage()"></select>

当列表中的所选项目发生变化时，您还需要一个changeLanguage函数：

$scope.changeLanguage = function(){
    if($scope.model.Language_Custom.indexOf(0) > -1)
      alert('do somthing here');
}

Plunker

Answer 2

以下是我使用的解决方案：

<div>
    Language:<select multiple name="Language_Custom" ng-model="model.Language_Custom" ng-required="true">
        <option ng-click="selectAllMultiValues(model, 'Language_Custom', Language_Custom_PossibleValues)">Select All</option>
        <option ng-repeat="pn in Language_Custom_PossibleValues" ng-model="p.Value">{{pn.Label}}</option>
    </select>
</div>

Angularjs选择了附加选项

2 个答案: