如何使用AngularJS管理下拉列表

Question

我有一个应用程序，其中向用户显示下拉列表。每个下拉列表都有相同的选项列表。用户可以添加新的下拉列表或删除一个下拉列表。见下面的截图。

我想维护用户选择的所选值的简单列表。例如，对于上面的屏幕截图，我希望将选择存储在$scope某处作为

["homepage", "keyword", "location", "original_priority"]

AngularJS是否可以这样做，即用户删除并添加下拉列表和角度会自动更新所选值列表？

到目前为止我尝试了什么

 var ClassifierController = function($scope, $http) {

    $scope.selected_classifiers = ['homepage', 'keyword', 'location', 'original_priority'];

    /* Calling a service to get a list of values for the dropdowns */
    $http.get('/rest/classifiers').then(function(resp) {
      $scope.classifiers = resp.data;
    });

    $scope.add = function() {
      console.log("Add");
      // Checking if none is already in the list
      var index = $scope.selected_classifiers.indexOf("none");
      if (index > -1) {
        alert("Cannot add. An unspecified grouper is already available at index " + (index+1));
      }
      else {
        $scope.selected_classifiers.push("none");
      }
    }

    $scope.remove = function(selection) {
      console.log("Remove " + selection);
      var index = $scope.selected_classifiers.indexOf(selection);
      if (index > -1) {
        $scope.selected_classifiers.splice(index, 1);
      }
    }
 }

然后在html中

 <div ng-controller="ClassifierController">
   <ol>
     <li ng-repeat="selection in selected_classifiers">
       <select>{{selection}}>
         <option ng-repeat="classifier in classifiers" value="{{classifier.value}}" ng-selected="classifier.value==selection">{{classifier.name}}</option>
       </select> <button title="Remove" ng-click="remove(selection)">X</ux-button>
     </li>
    <li><button title="Add new grouper" ng-click="add()">Add</ux-button></li>
   </ol>
 </div>

上面的设置可以提供良好的初始设置。删除工作，但更新现有的下拉列表或更新新添加的下拉列表不起作用。

Answer 1

与Angular一样，首先定义ViewModel的样子。

例如，如果您想要列出select个名称及其值，请将列表定义为：

$scope.selected_classifiers = [{name: "homepage", val: ""}, ...];

selected_classifiers将保留/初始化每个选择的值，并保留您实际拥有的选项。

然后，在视图中，迭代此列表并创建<selects>：

<div ng-repeat="selection in selected_classifiers">
    <select ng-model="selection.val"
            ng-options="classifier for classifier in classifiers">
       <option value="">{{selection.name}}</option>
    </select>
    <button title="Remove" ng-click="remove(selection)">X</button>
</div>
<button title="Add new grouper" ng-click="add()">Add</button>

Plunker