Question

我想为已经有选项的选项添加多个选择选项。理想情况下，我可以确定这些额外选项的顺序。

在AngularJS:Select中的以下调整后的简单示例中，包含未分配值的选项作为额外选项。它允许这个额外选项并将其保留在选项列表之上。

<!doctype html>
<html ng-app>
<head>
    <script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div ng-controller="MyCntrl">
      <select ng-model="color" ng-options="c.name for c in colors">
        <option value="">-- choose color --</option>
      </select>

      <hr/>
      Currently selected: {{ {selected_color:color}  }}
    </div>
</body>
</html>

的script.js

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black'},
    {name:'white'},
    {name:'red'},
    {name:'blue'},
    {name:'yellow'}
  ];
  $scope.color = $scope.colors[2]; // red
}

虽然上面的示例很有用，但我想通过添加一些静态选项来做更多的事情，这些选项会在插入ng-options之后显示，同时仍然允许null或empty值选项保持在插入的上方NG-选项。

这是我正在寻找的伪代码理念：（Plunker version）

<!doctype html>
<html ng-app>
<head>
    <script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div ng-controller="MyCntrl">
      <select ng-model="color" ng-options="c.name for c in colors">
        <option value="">-- choose color --</option>
        <!-- ng-options get inserted here -->

        <!-- additional static options below -->
        <option value="grey">grey</option>
        <option value="orange">orange</option>
      </select>

      <hr/>
      Currently selected: {{ {selected_color:color}  }}
    </div>
</body>
</html>

的script.js

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black'},
    {name:'white'},
    {name:'red'},
    {name:'blue'},
    {name:'yellow'}
  ];
  $scope.color = $scope.colors[2]; // red
}

当我向第二个例子添加两个静态选项（'gray'和'orange'）时，它们不会渲染。

非常感谢任何关于如何做到这一点的想法。

Answer 1

在select中使用ngOptions可为绑定提供更多功能和灵活性。但是，如果您使用的是字符串值，则可以在选项标签上使用ngRepeat来构建动态选项，并将其与静态选项和空白选项混合使用。

查看updated plunker。

这是一个片段：

    <select ng-model="color">
      <option value="">-- choose color --</option>
      <!-- ng-options get inserted here -->
      <option ng-repeat="c in colors" value="{{c.name }}">{{ c.name }}</option>
      <!-- additional static options below -->
      <option value="grey">grey</option>
      <option value="orange">orange</option>
    </select>

如何使用ng指令选择部分填充选择？

1 个答案: