angularjs - 如何在 ng-options 的第一个位置添加选项

Question

我ng-option在我的页面中添加元素。

这是它在模板中的外观：

<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>

在控制器中：

 $scope.selectedItem = {};

 $scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];

在我的项目中，我从一些查找表中获取范围项。

我需要添加到 ng-select 这个元素的值-1：

<option value="-1">- manual -</option>

它看起来像这样：

<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id">
   <option value="-1">- manual -</option>
</select>

这是Plunker。

但我没有看到视图manual选项。

知道为什么我在视图中看不到手动选项吗？

score 0 · Accepted Answer

由于您有id-name配对对象，您需要使用 unshift 在第一个位置添加一个新选项。

$scope.items.unshift({name: 'manual', id:-1});

然后指定默认选择的选项。

$scope.selectedItem = $scope.items[0];

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.items = [];
  $scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];
  
  $scope.items.unshift({name: 'manual', id:-1});
  $scope.selectedItem = $scope.items[0];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id">
      
    </select>
    
  </body>

</html>

score 0 · Accepted Answer

获取项目后在控制器中添加选项，

$scope.items.push({name:'-manual-', id: -1});

更新代码

score 0 · Accepted Answer

更改您的选择，如下所示

<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id">
   <option value="">Manual</option>
    </select>

score 0 · Accepted Answer

我们可以把ng-selected ="desirable item value" 属性放到选择元素上。

<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id" ng-selected="50">
 <option value="">Manual</option>
</select>

angularjs - 如何在 ng-options 的第一个位置添加选项

4 回答 4

Related

Reference