AngularJS ng-модель неправильно выбрала `<option>` - PullRequest
Новая
       8

AngularJS ng-модель неправильно выбрала `<option>`

0 голосов
/ 24 мая 2018

В моей форме редактирования я хочу выбрать поле выбора со значением, вставленным в базу данных.я использую ng-модель, чтобы выбрать значение, проблема в том, что он всегда выбирает первую опцию

из углового js 

 $scope.form.language_id=2

моего html-окна выбора 

<div class="form-group row" >
    <label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
    <div class="col-sm-10">
        <select  class="form-control" id="language_id" ng-model="form.language_id" name="language_id" required >
            <option ng-repeat="(key,value) in langs" value="{{value.id}}">{{value.languageTitle}}</option>
        </select>
    </div>
</div>

json image enter image description here

Следует отметить, что он всегда выбирает первый вариант. Не знаю, почему

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Вместо использования NgRepeat следует использовать директиву NgOptions , которая создается для тега выбора.

Вот рабочий пример 

angular.module("app",[]).controller("optionCtrl", function($scope) {
  $scope.form = {};
  $scope.form.language_id = 2;
  $scope.langs = [
  { id: 1,languageTitle: 'Eng' },
  { id: 2,languageTitle: 'Swe' },
  { id: 3,languageTitle: 'Fra' }
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>


<div ng-app="app" ng-controller="optionCtrl" class="form-group row" >
	<label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
	<div class="col-sm-10">
		<select class="form-control" 
				id="language_id" 
				ng-model="form.language_id" 
				name="language_id" 
				ng-options="item.id as item.languageTitle for item in langs"
				required >
		</select>
	</div>
</div>
0 голосов
/ 24 мая 2018

Атрибут value возвращает строки, а value.id - это число.Используйте ng-value без фигурных скобок {{ }} интерполяция. 

    <select  ng-model="form.language_id" name="language_id" required >
        <option ng-repeat="(key,value) in langs" ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶v̶a̶l̶u̶e̶.̶i̶d̶}̶}̶
                ng-value="value.id">
           {{value.languageTitle}}
        </option>
    </select>

Из документов:

В общем, соответствие между моделью и параметром оценивается путем строгого сравнениязначение модели по отношению к значению доступных параметров.

Если вы устанавливаете значение параметра с атрибутом value или textContent, значение всегда будет string, что означает, что значение моделитакже должна быть строкой.В противном случае директива select не может соответствовать им правильно.

Чтобы привязать модель к нестроковому значению, вы можете использовать одну из следующих стратегий:

  • the ngOptionsдиректива (select)
  • директива ngValue, которая позволяет произвольным выражениям принимать значения параметров ( Пример )
  • model $ parsers/ $ форматеры для преобразования строкового значения ( Пример ) 

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.form={"language_id":2};
$scope.langs=[
{"id":1,"languageTitle":"test1"},
{"id":2,"languageTitle":"test2"},
{"id":3,"languageTitle":"test3"},
]
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="form.language_id" name="language_id" required >
        <option ng-repeat="(key,value) in langs" ng-value="value.id">
           {{value.languageTitle}}
        </option>
    </select>

</body>

Для получения дополнительной информации см.

0 голосов
/ 24 мая 2018 

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.form={"language_id":2};
$scope.langs=[
{"id":1,"languageTitle":"test1"},
{"id":2,"languageTitle":"test2"},
{"id":3,"languageTitle":"test3"},
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="form-group row" >
<label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label>
<div class="col-sm-10">
<select  class="form-control" id="language_id" ng-model="form.language_id"
         name="language_id" required
         ng-options="lan.id as lan.languageTitle for lan in langs">
</select>
</div>
</div>
</div>
...