2016-11-18 2 views
0

У меня есть этот массив объектов. который имеет такие вещи.Угловая, как иметь несколько выбранных

[ 
    { 
     id: 1, 
     name: "Extra Cheese" 
    }, 
    { 
     id: 2, 
     name: "No Cheese" 
    } 
] 

им итерация через массив здесь

<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select> 

Вещи item.modifiers модель, которая имеет массив этого 2 ID

[ 
    1,2 
] 

Я хочу Мультиселектор выбрать авто выбрано два идентификатора, которые находятся в item.model

Я хочу, чтобы конечный результат выглядел примерно так

enter image description here

+0

Есть внешняя библиотека, что мы должны знать? Скриншот с несколькими выборами - это уже сделанный на переднем конце, и вы хотите знать, как сначала установить выбранные параметры? – Searching

ответ

1

Ваш код довольно много работает уже, возможно, некоторые из переменных не назначены правильно (например. id вместо _id)

angular.module('test', []).controller('Test', Test); 
 

 
function Test($scope) { 
 
    $scope.modifiers = [ 
 
    { 
 
     id: 1, 
 
     name: "Extra Cheese" 
 
    }, 
 
    { 
 
     id: 2, 
 
     name: "No Cheese" 
 
    } 
 
    ] 
 
    
 
    $scope.item = {}; 
 
    
 
    // add this for pre-selecting both options 
 
    $scope.item.modifiers = [1,2]; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app='test' ng-controller='Test'> 
 
    <select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select> 
 
</div>

0

Если я правильно понял вопрос правильно, Вы желаете, чтобы заранее выбрать два варианта.

Для этого вам нужно будет указать свою ng-модель на фактические объекты, которые вы итерируете.

Вам также необходимо изменить свои ng-опции на ng-options="modifier as modifier.name for modifier in modifiers", а не просто итерировать по идентификаторам.

Вот соответствующая документация под сложных моделей (объектов или коллекций) https://docs.angularjs.org/api/ng/directive/ngOptions

Что-то, как это должно работать:

HTML:

<select ng-model="$ctrl.item.modifiers" 
    ng-options="modifier as modifier.name for modifier in $ctrl.modifiers" 
    multiple chosen class="chosen-select" tabindex="4" > 
</select> 

JS:

app.controller("my-controller", function() { 
    var $ctrl = this; 

    $ctrl.modifiers = [{ 
     id: 1, 
     name: "Extra Cheese" 
    }, { 
     id: 2, 
     name: "No Cheese" 
    }]; 

    $ctrl.item = { 
     modifiers: [] 
    } 

    $ctrl.$onInit = function() { 
    const id1 = 1; 
    const id2 = 2; 
    for (const modifier of $ctrl.modifiers) { 
     if (modifier.id === id1 || modifier.id === id2) { 
     $ctrl.item.modifiers.push(modifier); 
     } 
    } 
    } 
} 

Вот ручка, показывающий результат: http://codepen.io/Lahikainen/pen/WooaEx

Я надеюсь, что это помогает ...

+0

Очевидно, я не знаю, как вы предварительно заполняете свою модель, так что часть в ней заполняется, вероятно, может быть улучшена :) –

Смежные вопросы