更新

Question

我正在尝试使用ng-options在下拉列表中显示多个值。

仅显示一个值时，它工作正常，但显示多个值时，效果不佳。

控制器：

unicode

HTML：

string

还缺少什么？

Answer 1

选择多个项目时，需要将模型初始化为数组：

<select multiple class="form-control"
    ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶v̶m̶.̶g̶r̶a̶d̶e̶S̶e̶l̶e̶c̶t̶e̶d̶"̶
    ng-model="vm.gradeSelected"
    ng-options="gradeObj.grade as vm.desc(gradeObj) for gradeObj in vm.gradeList">
</select>

̶v̶m̶.̶g̶r̶a̶d̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶v̶m̶.̶g̶r̶a̶d̶e̶L̶i̶s̶t̶[̶0̶]̶.̶g̶r̶a̶d̶e̶;̶
vm.gradeSelected = [vm.gradeList[0].grade];
vm.desc = item => item.grade + ' (' + item.category + ')';

The DEMO

angular.module("app",[])
.controller('ctrl', function() {
    var vm = this;
    vm.gradeList = [{
        grade: 1,
        category: 'very poor'
    },
    {
        grade: 2,
        category: 'poor'
    },
    {
        grade: 3,
        category: 'average'
    },
    {
        grade: 4,
        category: 'good'
    },
    {
        grade: 5,
        category: 'very good'
    }];
    vm.gradeSelected = [vm.gradeList[0].grade];
    vm.desc = item => item.grade + ' (' + item.category + ')';
});

select {
  height: 100px;
}

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
    <select multiple class="form-control"
            ng-model="vm.gradeSelected"
            ng-options="gradeObj.grade as vm.desc(gradeObj) for gradeObj in vm.gradeList">
    </select>
    <br>
    gradeSelected = {{vm.gradeSelected}}
</body>

ng-selected指令也不能与ng-model一起使用，请参见

When select have ng-model attribute, ng-selected not working

更新

如果我删除了multi属性，则演示无法正常工作

如果删除了multi属性，请不要使用数组进行初始化：

<select ̶m̶u̶l̶t̶i̶p̶l̶e̶ class="form-control"
    ng-model="vm.gradeSelected"
    ng-options="gradeObj.grade as vm.desc(gradeObj) for gradeObj in vm.gradeList">
</select>

̶v̶m̶.̶g̶r̶a̶d̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶[̶v̶m̶.̶g̶r̶a̶d̶e̶L̶i̶s̶t̶[̶0̶]̶.̶g̶r̶a̶d̶e̶]̶;̶
vm.gradeSelected = vm.gradeList[0].grade;
vm.desc = item => item.grade + ' (' + item.category + ')';

通过multiple属性，ng-model接受并返回一个数组；没有一个值。

从文档中：

多个（可选）

允许选择多个选项。所选值将作为数组绑定到模型。

— AngularJS <select> Directive API Reference

Answer 2

您只需按如下所示更改选择标签即可显示所选值。

 var app = angular.module('myApp', []);
      app.controller('listController', function() {
          var vm = this;
          vm.gradeList = [{
              grade: 1,
              category: 'very poor'
          },
          {
              grade: 2,
              category: 'poor'
          },
          {
              grade: 3,
              category: 'average'
          },
          {
              grade: 4,
              category: 'good'
          },
          {
              grade: 5,
              category: 'very good'
          }];
          vm.gradeSelected = vm.gradeList[0].grade;
      });

演示

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="listController as vm">
  <select class="form-control" ng-model="vm.gradeSelected">
    <option ng-repeat="gradeObj in vm.gradeList" ng-selected="vm.gradeSelected" ng-value="{{gradeObj.grade}}"> {{gradeObj.grade}} - {{gradeObj.category}}</option>
  </select>
</div>

name

AngularJS：在ng-options中显示多个值时呈现空选项

2 个答案:

The DEMO

更新

多个（可选）