【问题标题】：AngularJS: empty option rendering when showing multiple values in ng-optionsAngularJS：在ng-options中显示多个值时呈现空选项
【发布时间】：2018-07-23 22:55:45
【问题描述】：

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

当只显示一个值时，它可以正常工作，但在显示多个值时就不行了。

这是我的代码..http://tpcg.io/QrjgXN

控制器：

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

HTML：

<select multiple class="form-control"
  ng-selected="vm.gradeSelected"
  ng-model="vm.gradeSelected"
  ng-options="gradeObj.grade + ' (' + gradeObj.category + ')' for gradeObj in vm.gradeList">
</select>

还缺少什么？

【问题讨论】：

您发布的代码似乎工作正常。什么代码不起作用？你在做什么，你期望会发生什么，会发生什么？比“它不起作用”更准确。
@JBNizet 我猜 OP 正在询问空白选项

标签： angularjs ng-options

【解决方案1】：

您可以如下更改您的选择标签，以便能够显示所选值。

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

演示

 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>

【讨论】：

请提供演示链接。

【解决方案2】：

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

<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

更新

如果我删除多个属性，演示将无法正常工作

如果去掉multiple属性，不要用数组初始化：

<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

【讨论】：

如果我去掉multiple属性，demo就不行了。