Блог

Главная - Вопросы по программированию - ng-опция предварительно выбирает значение для пары (ключ, значение), когда значение представляет собой массив объектов

ng-опция предварительно выбирает значение для пары (ключ, значение), когда значение представляет собой массив объектов

#javascript #angularjs

#javascript #angularjs

Вопрос:

Я не могу выполнить предварительный выбор в ng-options из пары (ключ, значение), когда значение представляет собой массив объектов, хотя, если я использую value.property, я могу выполнить предварительный выбор.

Я написал пример в jsfiddle, и я могу предварительно выбрать ng-option по ключу или значению.property но в моем случае мне нужен весь массив

редактировать: я редактирую, потому что [ключ, значение] — это [ключ, массив [Объект]] вместо [ключ, объект]. И я добавляю новый код выбора html, чтобы показать правильный выбор на основе заданных ответов.

имейте в виду, что вы должны передать в ng-модель весь набор массивов, хотя отслеживание просто проверяет нулевой массив. Обе структуры должны быть идентичными.

Обновлен JSFiddel

HTML

 <div ng-app="myApp" ng-controller="demoCtrl">
    <select name="first" ng-model="data" ng-options="key as value.templateId for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is preselected! = {{data}}</div>
    <br>
    <select name="second" ng-model="data2" ng-options="value.templateId as key for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is preselected! = {{data2}}</div>
    <br>
    <select name="third" ng-model="data3" ng-options="value as key for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is NOT preselected! = {{data3}}</div> :(

    <select name="forth" ng-model="data4" ng-options="key for (key, value) in                                
    options track by value[0].templateId">

      <option value="">Select template</option>
   </select>

<div>Solution! = {{data4}}</div>

Угловой

 var app = angular.module('myApp', []);

app.controller('demoCtrl', function($scope) {

    $scope.data = "for offer";
    $scope.data2 = "002";
    $scope.data3 = '{ templateId :"001" , color : "yellow"}';

   $scope.data = [
                   {"templateId":3,"color":"blue"},
                   {"templateId":4,"color":"dark blue"}
                 ];

   $scope.options =   {  
            "for offer": 
                 [
                   {"templateId":1,"color":"yellow"},
                   {"templateId":2,"color":"dark yellow"}
                 ],

           "no offer": 
                 [
                    {"templateId":3,"color":"blue"},
                    {"templateId":4,"color":"dark blue"}
                 ],

           "general": 
                 [
                    {"templateId":5,"color":"orange"},
                    {"templateId":6,"color":"dark orange"}
                 ]
        };
});

Ответ №1:

При использовании ngOptions вы можете использовать track by для определения уникального идентификатора для правильной привязки значения. Кроме того, значение не должно быть строкой, оно должно быть таким объектом:

 $scope.data3 = { templateId :"001" , color : "yellow"};

И ваш шаблон:

 <select name="third"
    ng-model="data3"
    ng-options="value as key for (key, value) in options track by value.templateId">
    <option value="">Select template</option>
</select>

При использовании track by value.templateId будет указано ngOptions , чтобы посмотреть на свойство value.templateId при проверке равенства объектов и определить выбранное значение.

Обновил вашу скрипку.

Комментарии:

1. спасибо @LenilsonDeCastro, я тоже написал решение на основе этого ответа

2. Рад, что я смог помочь. Кроме того, вы можете принять ответ, если он правильный.

3. извините, потому что мой поздний ответ. Я не уверен, должен ли я принять ваш ответ, даже если он истинный и правильный ответ (добавленный в отредактированный вопрос) основан на нем. Если вы видите, что мое решение отслеживается по свойству массива, а не только по свойству, и я даю точную информацию о том, как передать массив. Надеюсь, вы это понимаете. В любом случае, вы считаете, что я все равно должен принять ваш ответ, у меня нет проблем с этим.

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

Ответ №2:

Для достижения этого требования вы должны использовать track by в ng-select. Трек по поможет вам привязать опцию выбора к тегу значения. Вы также должны указать уникальное поле идентификатора для отслеживания выбранного параметра.

 <select ng-model="data" ng-options="item.color for item in options  track by item.templateId">
</select>

В вашем контроллере объект options будет выглядеть следующим образом

 $scope.options = [{ templateId :"001" , color : "yellow"}, 
                  { templateId :"002" , color : "red"} ,    
                  { templateId :"003" , color : "green"}];

Чтобы инициализировать опцию выбора, вы можете задать модель с помощью

 $scope.data= $scope.options[0];

Вы можете инициализировать переменную области видимости, только если используете свойство track by в опции select . В вашем вопросе templateId это уникальный идентификатор

Комментарии:

1. спасибо @Nitheesh, я написал решение на основе этого ответа