angular select ng-selected не работает (с ‹опцией ng-repeat›)

Я потратил час и перепробовал все мыслимые перестановки свойств, чтобы привязать выбор к модели как к объекту, и ng-selected ничего не делает.

<select ng-model="localModel.priceType">
    <option 
            ng-repeat="item in vm.priceTypes"
            ng-selected="localModel.priceType == item"
            ng-value="item"
            >{{item.name}}</option>
</select>

or 

<select ng-model="localModel.priceType">
    <option 
            ng-repeat="item in vm.priceTypes"
            ng-selected="localModel.priceType.id == item.id"
            ng-value="item"
            >{{item.name}}</option>
</select>

or 

<select ng-model="localModel.priceType">
    <option 
            ng-repeat="item in vm.priceTypes track by item.name"
            ng-selected="localModel.priceType.name == item.name"
            ng-value="item"
            >{{item.name}}</option>
</select>

Список выбора отображается правильно, значения параметров выглядят странно, например, «object: 875». и selected не работает.

Мне нужно, чтобы ng-модель была объектом, а не object.someId.

решил эту проблему, используя ng-options вместо ‹option› ng-repat

<select ng-model="localModel.priceType" ng-options="item as item.namefor item in vm.priceTypes track by item.name"></select>

javascript angularjs angularjs-ng-repeat angularjs-ng-model
person Sonic Soul    schedule 21.07.2017    source источник
comment
Это потому, что вы должны использовать ng-options с ng-model, который содержит значение из вашего массива vm.priceTypes[0] docs.angularjs .org/api/ng/directive/ngOptions   -  person Marlon Barcarol    schedule 21.07.2017
comment
использование директивы ng-options вместо опций с повторением было решением. до сих пор не уверен, почему последнее не сработает, но я не потеряю сон из-за этого   -  person Sonic Soul    schedule 21.07.2017

Ответы (2)


arrow_upward
3
arrow_downward

ngValue ожидает строку для ngValue. Чтобы использовать ngRepeat с тегом <option>, используйте value="{{item}}" вместо ng-value. Разверните фрагмент ниже, чтобы увидеть, как он работает.

angular.module('myApp', [])
  .controller('ctrl', function($scope) {
    $scope.vm = {
      priceTypes: [{
          id: 3,
          name: 'pound'
        },
        {
          id: 5,
          name: 'Yen'
        },
        {
          id: 6,
          name: 'dollar'
        }
      ]
    };
    //select model value
    $scope.localModel = {
      priceType: $scope.vm.priceTypes[1]
    };
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <select ng-model="localModel.priceType">
  <option 
            ng-repeat="item in vm.priceTypes as item"
            ng-selected="localModel.priceType.id == item.id"
            value="{{item}}"
            >{{item.name}}</option>
</select>
  <div>
    priceType: {{ localModel.priceType }}
  </div>
</div>

Более простой подход — использовать ngOptions в теге <select> в сочетании с формы:

select as label for value in array track by expr

См. формы comprehension_expression в разделе Аргументы в разделе Использование для получения дополнительной информации.

angular.module('myApp', [])
  .controller('ctrl', function($scope) {
    $scope.vm = {
      priceTypes: [{
          id: 3,
          name: 'pound'
        },
        {
          id: 5,
          name: 'Yen'
        },
        {
          id: 6,
          name: 'dollar'
        }
      ]
    };
    //select model value
    $scope.localModel = {
      priceType: $scope.vm.priceTypes[1]
    };
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <select ng-model="localModel.priceType" ng-options="item as item.name for item in vm.priceTypes track by item.name">
</select>
  <div>
    priceType: {{ localModel.priceType }}
  </div>
</div>

person Sᴀᴍ Onᴇᴌᴀ    schedule 21.07.2017
comment
спасибо за создание фрагмента! Вы знаете, почему это работает только с ng-options? - person Sonic Soul; 21.07.2017
comment
Я обновил объяснение - видимо, ngValue ожидает строку, поэтому работа с объектом не будет работать так хорошо... - person Sᴀᴍ Onᴇᴌᴀ; 21.07.2017

arrow_upward
1
arrow_downward

https://docs.angularjs.org/api/ng/directive/ngSelected

ngSelected не взаимодействует с директивами select и ngModel, он только устанавливает атрибут selected для элемента. Если вы используете ngModel для выбора, вы не должны использовать ngSelected для параметров, так как ngModel установит значение выбора и выбранные параметры.

Пытаться

<select ng-model="localModel.priceType">
  <option  ng-repeat="item in vm.priceTypes track by item.name"
           ng-value="item.name">
      {{item.name}}
  </option>
</select>

Вы можете изменить ng-value на любое значение из vm.priceTypes[0].

person KTU    schedule 21.07.2017
comment
спасибо, но это делает то же самое, что и мой первоначальный пример. это заставляет работать выбор, но не выбранное свойство - person Sonic Soul; 21.07.2017