2013-06-21 2 views
5

У меня есть вопрос о настройке нг-модели в сочетании выбранного виджета и AngularJS (см это видео: https://www.youtube.com/watch?v=8ozyXwLzFYs)Угловое + выбраны: выбранные значения

То, что я хотел бы сделать, это установить получателей некоторых значений, которые будет предварительно выбран. Вот HTML и JS для этого примера (из видео)

<h1>Chosen</h1> 
    <select data-placeholder="Choose a Recipient" multiple class="span4 chzn-select" chosen 
     ng-model="recipients" ng-options="recipient.name for recipient in recipientsList"> 
    </select> 

    <p ng-repeat="recipient in recipients"><strong>{{recipient.name}}</strong></p> 

И JS контроллер

$scope.recipientsList = []; 
    $scope.recipients = []; 
    $scope.fetchRecipients = function() { 
     $http.get($scope.url).then(function(result){ 

     $scope.recipientsList = [ 
    {"id":0, "name":"Recipient 0"}, 
    {"id":1, "name":"Recipient 1"}, 
    {"id":2, "name":"Recipient 2"}, 
    {"id":3, "name":"Recipient 3"}, 
    {"id":4, "name":"Recipient 4"}, 
    {"id":5, "name":"Recipient 5"}, 
    {"id":6, "name":"Recipient 6"}, 
    {"id":7, "name":"Recipient 7"}, 
    {"id":8, "name":"Recipient 8"}, 
    {"id":9, "name":"Recipient 9"}, 
    {"id":10, "name":"Recipient 10"} 
]; 
    $scope.recipients = [{"id":0, "name":"Recipient 0"}, 
    {"id":1, "name":"Recipient 1"}]; 
    }); 
    } 

    $scope.fetchRecipients(); 

Я попытался несколько сочетаний, но значения в меню не выбран предварительно, хотя они хранятся в получателях, потому что они видны под меню. Вы можете увидеть этот пример здесь: http://jsfiddle.net/YKZSw/8/

Спасибо за ваших просителей.

атрибут Матого

ответ

4

AngularJS ngOptions выбирает элемент из массива, представленный в качестве источника данных. В вашем случае массив recipientsList содержит определенное количество объектов. Тем не менее, элементы, которые вы хотите предварительно выбрать, отсутствуют в списке из-за объектного неравенства, даже если они похожи. Значение recipientsList: {"id": 0, "name": "Recipient 0"} не равно получателям: {"id": 0, "name": "Recipient 0"} (Вы можете попробовать то же самое в JS). Угловой элемент не находит элемент в списке и, следовательно, не выбирает его.

Модифицированная скрипка работа: http://jsfiddle.net/mananbharara/YKZSw/9/ Единственное отличие в данном случае в вашем определении получателей:

$scope.recipients = [$scope.recipientsList[0], $scope.recipientsList[1]];

В этом случае у вас есть один список и выбранные значения могут поступать только из этого списка.

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

+0

не может ли это вызвать проблемы при включении фильтров? Здесь jsfiddle, где эта проблема останавливается на предварительном отборе, какие-либо предложения по ее решению? http://jsfiddle.net/wKMZM/13/ – ragche

+0

Похоже, что вы допустили ошибку при установке начального значения 'myModel'. То, что предлагает ваша разметка, заключается в том, что вы хотите привязать к строковым значениям, пока вы устанавливаете начальное значение в 'Object'. Вот [обновленная скрипка] (http://jsfiddle.net/wKMZM/15/), которая, кажется, работает. Вместо того, чтобы делать '$ scope.myModel = {type: 'ninjacat'};', то, что, похоже, работает: '$ scope.myModel = 'ninjacat'' – manan

6

Поскольку версия AngularJS 1.1.5, они добавили пункт track by.

Это должно помочь. В вашем случае вы можете добавить трек по id.