AngularJS: как создать опцию выбора и установить опцию по умолчанию?

Я использую AngularJS для создания html-формы. Поэтому в моей форме у меня есть 2 ввода текста и выбор. Код ниже:AngularJS: как создать опцию выбора и установить опцию по умолчанию?

<!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.

источник

2014-09-24 Pracede

Это намного проще/быстрее, чтобы ответить, когда вы передаете plunker - хорошая работа :) –

Да, я думаю, что это нормально, чтобы установить значение по умолчанию в модели, я не вижу проблемы с ним.

Как к вашей проблеме этикетки, вы использовали неправильный итератор item in towns, должен был town in towns

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

источник

2014-09-24 12:17:22 bakkal

На самом деле есть проблема как он это сделал. Это не сработало, потому что он не ссылался на модель ... –

Я установил свой plunker здесь: http://plnkr.co/edit/pJyOGUtBRiaoeFYeEDFD?p=preview

Проблемы были:

Неверный синтаксис в ng-вариантах. Должно быть: item.name for item in towns или town.name for town in towns
Вы должны установить выбранное значение для одного из объектов в источнике - не новый объект: $scope.myForm.town = $scope.towns[0];

Существует еще один способ решить эту проблему в 2. Если вы не хотите ссылаться на правильный объект $scope.towns[0], то вы можете изменить способ угловых дорожек модели, указав track by. Вам нужно будет изменить нг-опции для town.name for town in towns track by town.value, но затем установить выбранный индекс, как это: $scope.myForm.town = {value : "1"};

источник

2014-09-24 12:22:24

AngularJS: как создать опцию выбора и установить опцию по умолчанию?

ответ

Смежные вопросы