2013-06-21 15 views
5

Mam pytanie o ustawienie NG-modelu w połączeniu z wybranym widget i angularjs (zobacz ten film: https://www.youtube.com/watch?v=8ozyXwLzFYs)kątowa + najważniejsze: Wybrane wartości

Co chciałbym zrobić, to ustawić odbiorców do pewnych wartości, które byłby wstępnie wybrany. Oto HTML i JS w tym przykładzie (z filmu)

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

i JS w kontrolerze

$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(); 

Próbowałem kilka kombinacji wartości w menu, ale nie są wstępnie, chociaż są one przechowywane w adresatach, ponieważ są widoczne pod menu. Możesz zobaczyć ten przykład tutaj: http://jsfiddle.net/YKZSw/8/

Dzięki za twoje ansers.

atrybut Matej

Odpowiedz

4

angularjs ngOptions wybiera element z tablicy przewidziany jako źródło danych. W twoim przypadku tablica recipientsList zawiera pewną liczbę obiektów. Jednak elementy, które chcesz wybrać, nie są obecne na liście z powodu nierówności obiektów, nawet jeśli są podobne. Znaczenie recipientsList: {"id": 0, "name": "Recipient 0"} nie jest równe odbiorcom: {"id": 0, "name": "Recipient 0"} (Możesz spróbować zrobić to samo w Konsola JS). Angular nie znajduje elementu na liście, a tym samym nie wybiera preselekcji.

Ten zmodyfikowany skrzypce działa: http://jsfiddle.net/mananbharara/YKZSw/9/ Jedyna różnica w tym przypadku jest w definicji odbiorcy:

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

W tym przypadku masz jedną listę i wybrane wartości mogą pochodzić tylko z tej listy.

Alternatywą dla tego podejścia, które można zastosować w przypadku konieczności zachowania dwóch list, jest zachowanie wybranej wartości jako typu pierwotnego. W takim przypadku zawsze obowiązywałaby prymitywna równość.

+0

czy to zachowanie nie powodowałoby problemów przy włączaniu filtrów? Oto jsfiddle, w którym ten problem zatrzymuje się przed wstępną selekcja, wszelkie sugestie dotyczące rozwiązania tego problemu? http://jsfiddle.net/wKMZM/13/ – ragche

+0

Wygląda na to, że popełniłeś błąd podczas ustawiania wartości początkowej 'myModel'. To, co sugeruje twój znacznik, polega na tym, że chcesz powiązać z wartościami ciągu, podczas gdy ustawiasz początkową wartość na "Obiekt". Oto [zaktualizowane skrzypce] (http://jsfiddle.net/wKMZM/15/), które wydaje się działać. Zamiast robić '$ scope.myModel = {type: 'ninjacat'};', wydaje się, że działa: '$ scope.myModel = 'ninjacat'' – manan

6

Od wersji AngularJS w wersji 1.1.5 dodano klauzulę track by.

To powinno pomóc. W twoim przypadku możesz dodać utwór według id.

Powiązane problemy