Угловой выбор ng-selected не работает (с <option ng-repeat>)

Question

Я потратил час и попробовал каждую мыслимую перестановку свойств, чтобы связать выбор с моделью как объект, а 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>

или же

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

или же

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

Список выбора отображается правильно, значения параметров выглядят необычно, т.е. "объект:875". а выбранный не работает.

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

решил эту проблему с помощью ng-options вместо ng-repat

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

Answer 1

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

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

Обратитесь к формам comppresion_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>

Answer 2

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],