Здравствуйте! Я попытался реализовать изменения, представленные в нескольких примерах, но ни один из них не работает. У меня есть ng-модель, и я четко определяю свойство объекта, который хотел бы получить. Однако это все еще не работает. Любая помощь будет отличной.

Html

<select chose ng-model="selected" ng-options="type as type.Name for type in ansExplanOpt">
     <option value="">-- Select an Option --</option>
</select>

Контроллер

$scope.selected = ansExplanOpt.data;

Объект заполняется (я проверил), и у него есть свойства Name и Id.

Любая помощь будет отличной. Благодарность

1
RyeGuy 6 Янв 2017 в 22:27

3 ответа

Лучший ответ

Вы были очень близки Просто выглядит как неправильное использование значения ng-model. Ваш код должен быть что-то вроде

<select chose ng-model="selectedValue" ng-options="type.Id as type.Name for type in ansExplanOpt">
</select>

И ng-model будет тем, что выбрал пользователь.

Их документация также хорошо разбирается: https://docs.angularjs.org/api/ нг / директивы / ngOptions

2
Eric G 6 Янв 2017 в 19:45

Вы можете определить, какой элемент в массиве вы хотите предварительно выбрать:

var myApp = angular.module('myApp', [])
 .controller('TestController', ['$scope', function($scope) {
  $scope.data = [{
    label: 'blah',
    value: 'blah'
  }, {
    label: 'blah1',
    value: 'blah1'
  }, {
    label: 'blah2',
    value: 'blah2'
  }];
  $scope.sel = $scope.data[0];

}]);

HTML:

<div ng-controller="TestController">
  {{sel}}
  <select ng-model="sel.value" ng-options="d.value as d.label for d in data">
  </select>
</div>

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

1
Jax 6 Янв 2017 в 19:41

Вот решение:

ng-model - это значение, выбранное пользователем.

function TodoCtrl($scope) {
  $scope.ansExplanOpt = [
    {text:'learn angular', id:1},
    {text:'build an angular app', id:2}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
<select chose ng-model="select" ng-options="type as type.text for type in ansExplanOpt">
     <option value="">-- Select an Option --</option>
</select>
{{select.text}}
  <br>
    {{select}}
  </div>
</div>
1
Mihai Alexandru-Ionut 6 Янв 2017 в 19:39