Question

我有以下代码填充页面上的某个选择项：

<select ng-model="activity.selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select><br>

我想知道是否有可能指定一个默认选项，以便我可以给它一个标题和一个ID。例如，如果选择默认值，则activity.selectedParent.Title = "None"和activity.selectedParent.id = 0。这是否可以使用Angular指令在<select>标记内以某种方式指定它？否则，实现这一目标的最有效方法是什么？

Answer 1

如果我很清楚您的问题，即使选择了默认设置也要设置对象，那么您可以通过两种方式完成：

在select标记内使用ngInit指令，如下所示：

ng-init="selectedParent = { '_id': 0, 'title': 'None' };"
在控制器中初始化对象：

$scope.selectedParent = { "_id": 0, "title": "None" };

修改

我想我现在得到了你想要的东西：你想要一个默认选项而不是空白作为第一选项，对吧？如果是这样，您可以使用unshift方法将此元素添加到现有数组中，因此它将作为第一个元素放置如下：

$scope.parents.unshift($scope.selectedParent);

这是一个代码片段：

var app = angular.module('app', []); app.controller('mainCtrl', function($scope) { $scope.parents = [ { "_id":1, "title":"first" }, { "_id":2, "title":"second" }, { "_id":3, "title":"third" }, { "_id":4, "title":"four" } ]; $scope.selectedParent = { "_id": 0, "title": "None" }; $scope.parents.unshift($scope.selectedParent); });

<!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <select ng-model="selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select> <hr> Selected: <span ng-bind="selectedParent | json"></span> </body> </html>

Answer 2

如果ng-options中使用的数组不包含您希望设置为默认值的值，那么实现此目的的最简单方法是将默认值添加到数组中。

首先在控制器中设置selectedParent

$scope.selectedParent = { "_id": 0, "title": "None" };

然后将其添加到数组中的第一个位置

$scope.parents.splice(0,0,$scope.selectedParent);

最终将选择的ng模型设置为ng-model="$scope.selectedParent"

默认选择在Angular中使用JSON对象的选项

2 个答案: