Почему глючит select в angular при выборе?

Question

[Айдар]

Здравствуйте! При выборе некоторых пунктов из списка, выбирается совсем другой. Допустим мы выбрали на "Толщина 4-6" все норм, "Толщина 8" все норм и т.д. ,но когда выбираем "Толщина 15-19" выбирается "Толщина 12" или вообще другой. В итоге select работает хаотично. Не могу понять почему так происходит.
Вот ссылка plnkr.co/edit/5F7nWMOHafIp9GNucqwD?p=preview , пощелкайте select и увидите этот глюк.

Answer 1

[Влад Токарев]

Проблема в следующем месте:

<select ... ng-options="value.price as value.name group by value.group for value in holes" ...>
...

У вас за выбранный параметр принимается value.price: value.price as value.name, а это неуникальный параметр. В итоге при выборе пункта выбирается последний элемент, у которого указанная цена равна выбранному значению.

Решение: заменить value.price as value.name на value.id as value.name.

Почему происходит то, что вы называете глюком: при выборе элемента берется его цена и это значение назначается селекту и все. Т.е. на jQuery это выглядело бы так:
$('select').val(190);

Comments

[Айдар]

Влад Токарев ,мне price нужен был для отображения цены,а теперь отображается id
plnkr.co/edit/bqIHomdo3dZW4glcL9MJ?p=preview

[Влад Токарев]

Айдар: plnkr.co/edit/eEtuu4QHbr1pSoEgWBMM?p=preview

[Айдар]

Влад Токарев ,ОГРОМНОЕ спасибо за решения и потраченное на меня время!

[Влад Токарев]

Айдар: пожалуйста, с тебя доллар (не стесняемся отмечать ответы решением)

[Айдар]

Влад Токарев ,я бы отметил, но werevolff тоже накидал решений. Жалко нельзя сделать решением обе ветки

[werevolff]

Влад Токарев: angular.forEach($scope.holes, function (item, index) {
if (item.id == $scope.holeId*1) {
$scope.price = item.price;
}
});

За это доллар?

[Влад Токарев]

Жалко нельзя сделать решением обе ветки

Айдар: отчего ж нельзя, вполне себе можно

Answer 2

[werevolff]

Потому, что цена выступает идентификатором. Вот рабочая версия:
plnkr.co/edit/5BYQ1frKklCpvMDzilRa?p=preview

function OrderFormController($scope){
  
/*Массив отверстий*/
$scope.holes = [
{id: 208,group: "Диаметр отверстия 5-10мм",name: 'Толщина 4-6',price: 60,active:false},
{id: 209,group: "Диаметр отверстия 5-10мм",name: 'Толщина 8',price: 90,active:false},
{id: 210,group: "Диаметр отверстия 5-10мм",name: 'Толщина 10',price: 140,active:false},
{id: 211,group: "Диаметр отверстия 5-10мм",name: 'Толщина 12',price: 140,active:false},
{id: 212,group: "Диаметр отверстия 5-10мм",name: 'Толщина 15-19',price: 190,active:false},  
{id: 213,group: "Диаметр отверстия 11-16мм",name: 'Толщина 4-6',price: 65,active:false},
{id: 214,group: "Диаметр отверстия 11-16мм",name: 'Толщина 8',price: 100,active:false},
{id: 215,group: "Диаметр отверстия 11-16мм",name: 'Толщина 10',price: 190,active:false},
{id: 216,group: "Диаметр отверстия 11-16мм",name: 'Толщина 12',price: 190,active:false},
{id: 217,group: "Диаметр отверстия 11-16мм",name: 'Толщина 15-19',price: 210,active:false}
];
/*--------*/
  
/*Выбор отверстия*/
$scope.hole = 0;
$scope.total_hole = function () {
  var t_h = $scope.hole.price;       
  return t_h;
}
/*--------*/  
  
}

<div ng-controller="OrderFormController" ng-app="">
      <select ng-model="hole" ng-options="value.name group by value.group for value in holes" class="form-control input-md">
        <option value="">--- Не выбрано ---</option>
      </select>
      <p> Цена: {{total_hole()}} </p>
    </div>

Comments

[werevolff]

Айдар: Так и отображайте цену. В вашем коде цена выступает как value, а не как визуальный элемент.

[werevolff]

Айдар: Если вы хотите отображать цену, то вам нужно пересобрать массив значений:
{id: 208,group: "Диаметр отверстия 5-10мм (60р.)",name: 'Толщина 4-6',active:false},
{id: 209,group: "Диаметр отверстия 5-10мм (90р.)",name: 'Толщина 8',price: 90,active:false},
{id: 210,group: "Диаметр отверстия 5-10мм (140р.)",name: 'Толщина 10',active:false},

[Айдар]

werevolff ,мне price нужен был для отображения цены,а теперь отображается id
plnkr.co/edit/bqIHomdo3dZW4glcL9MJ?p=preview

[werevolff]

Айдар: Там нигде цена не отображается. Сделайте, пожалуйста скриншот.

[Айдар]

werevolff ,цена в смысле само число которое в массиве. Оно в последующем должно складываться с другими числами. Я его вывел пока для наглядности
plnkr.co/edit/GYQYi523sdbDzhlJsF1y?p=preview

[werevolff]

Айдар: plnkr.co/edit/5BYQ1frKklCpvMDzilRa?p=preview

[werevolff]

Айдар: А вот вариант после рефакторинга:

plnkr.co/edit/5BYQ1frKklCpvMDzilRa?p=preview

[Айдар]

werevolff , вторая версия "чище". Просто до этого я так пытался сделать через $scope.hole.price; и ничего не выходило.
В любом случае ОГРОМНОЕ спасибо за варианты решения.

[werevolff]

Айдар: Ну я помню, что делал select и в модель писался Object. Видимо, ангуляр предоставляет интерфейс, в котором слишком много вариантов отработки синтаксиса (повышенный user-friendly). Получается, что оператор as был лишним. Документация подсказала, что правильно отрабатывается

label group by value_group for value in options

[Айдар]

werevolff , странно..при выборе значения -- не выбрано -- не появляется сумма по умолчанию "0". Хотя вначале она есть,до выбора. И в js указано значение по умолчанию
$scope.hole = 0; $scope.selectedPrice = 0;
plnkr.co/edit/hdo0lEj9z5TRdtK16jFV?p=preview

[werevolff]

Айдар: plnkr.co/edit/6VvqsKMVQuLibrH452Q8?p=preview

var t_h = ($scope.hole.hasOwnProperty('price')) ? $scope.hole.price : 0;

[Айдар]

werevolff , не срабатывает(

[werevolff]

Айдар: plnkr.co/edit/6VvqsKMVQuLibrH452Q8?p=preview

[Айдар]

werevolff , крутъ) После того,как в обоих решениях я узнал,что price нужно заменить на id....хотел плюнуть на все это дело. Думал,что нужно будет глобально все переписывать и т.д.