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

I use AngularJS to create a html form. So in my form i have 2 text input and select option. The code is below :

我使用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>

I am facing two problem : 1. I cannot see option label. I don't understand. I use the answer here to write my select option. What's wrong please ? 2.In my controller i set the model of select option to have a option selected by default. I am wondering if it's the right way to do it ?

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

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

Thank you for helping. Here is my plunker link.

感谢您的帮助。这是我的plunker链接。

2 个解决方案

#1

Yes I think it's alright to set the default in the model, I don't see a problem with it.

是的我认为在模型中设置默认值是没关系的,我没有看到它的问题。

As to your label problem, you have used the wrong iterator item in towns, should have been town in towns

至于你的标签问题,你在城镇中使用了错误的迭代器项目,应该是城镇中的城镇

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

#2

I fixed your plunker here: http://plnkr.co/edit/pJyOGUtBRiaoeFYeEDFD?p=preview

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

The problems were:

问题是:

Wrong syntax in ng-options. Should have been: item.name for item in towns or town.name for town in towns

ng-options中的语法错误。应该是:城镇中的项目的item.name或城镇中的城镇名称
You have to set the selected value to one of the objects in the source - not a new object: $scope.myForm.town = $scope.towns[0];

您必须将所选值设置为源中的一个对象 - 而不是新对象:$ scope.myForm.town = $ scope.towns [0];

There is another way you can solve the problem in 2. If you do not want to reference the correct object $scope.towns[0] then you can change the way angular tracks the model by specifying a track by. You will need to change the ng-options to town.name for town in towns track by town.value but then you set the selected index like this: $scope.myForm.town = {value : "1"};

还有另一种方法可以解决2中的问题。如果你不想引用正确的对象$ scope.towns [0],那么你可以通过指定轨道来改变角度跟踪模型的方式。您需要通过town.value将ng-options更改为城镇中的城镇的town.name,然后按照以下方式设置所选索引:$ scope.myForm.town = {value:“1”};

#1