AngularJS：如何创建选择选项并设置默认选择选项？答案

【问题标题】：AngularJS : how to create select option and set default select option?AngularJS：如何创建选择选项并设置默认选择选项？
【发布时间】：2014-11-18 22:21:42
【问题描述】：

我使用 AngularJS 创建一个 html 表单。所以在我的表单中，我有 2 个文本输入和选择选项。代码如下：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.myForm.firstName = "Jakob";
                $scope.myForm.lastName = "Nielsen";
                $scope.myForm.town  = {name:"Not filled", value:"0"};
                $scope.towns  = [
                                            {name:"Not filled", value:"0"},
                                            {name:"New York", value:"1"},
                                            {name:"San Francisco", value:"2"},
                                            {name:"Boston", value:"3"},
                                            {name:"Miami", value:"4"}
                                        ];
            } );
</script>
<body ng-app="myapp">

<div ng-controller="MyController" >
    <form>
         First name : <input type="text" name="firstName" ng-model="myForm.firstName"> <br/>
         Last name : <input type="text" name="lastName"  ng-model="myForm.lastName">  <br/>
         Town : 
         <select ng-model="myForm.town" ng-options="town.value as town.name for item in towns"></select>



    </form>

    {{myForm.firstName}} | {{myForm.lastName}} | {{myForm.town.name}} | {{myForm.town.value}}

    <div>

</body>
</html>

我面临两个问题： 1. 看不到选项标签。我不明白。我使用答案here 来编写我的选择选项。请问怎么了？ 2.在我的控制器中，我将选择选项的模型设置为默认选择一个选项。我想知道这是否是正确的方法？

$scope.myForm.town  = {name:"Not filled", value:"0"};

感谢您的帮助。这是我的plunker link。

【问题讨论】：

当你提供一个 plunker 时，回答起来更容易/更快 - 干得好 :)

标签： angularjs forms

【解决方案1】：

是的，我认为在模型中设置默认值是可以的，我认为它没有问题。

关于你的标签问题，你使用了错误的迭代器item in towns，应该是town in towns

<select ng-model="myForm.town" ng-options="town.value as town.name for town in towns"></select>

【讨论】：

其实他做的方式有问题。它没有工作，因为他没有参考模型......

【解决方案2】：

我在这里修复了你的 plunker： http://plnkr.co/edit/pJyOGUtBRiaoeFYeEDFD?p=preview

问题是：

ng-options 中的语法错误。应该是：item.name for item in towns 或 town.name for town in towns
您必须将所选值设置为源中的对象之一 - 而不是新对象：$scope.myForm.town = $scope.towns[0];

还有另一种方法可以解决2中的问题。如果您不想引用正确的对象$scope.towns[0]，那么您可以通过指定track by来更改角度跟踪模型的方式。您需要将 ng-options 更改为 town.name for town in towns track by town.value，然后您将所选索引设置为：$scope.myForm.town = {value : "1"};

【讨论】：