Jak ustawić wartość domyślną dla opcji ng (wielokrotnego wyboru)?

Chciałem ustawić domyślną wartość moich opcji-ng przy użyciu ng-init, ng-model itp. Nie działały w ogóle. Mój kod jest następujący:Jak ustawić wartość domyślną dla opcji ng (wielokrotnego wyboru)?

kątowa

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

app.controller('fooController', function($scope){ 
    $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}]; 
    $scope.user.roles = $scope.roles[0]; 
});

HTML

<body data-ng-app="role" data-ng-controller="fooController"> 
    <select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select> 
</body>

Oto moja Plunkr. Każda pomoc będzie mile widziane.

Źródło

2014-12-08 lvarayut

Aktualizacja:

Jeśli chcesz się dostać bezpośrednio do odniesienia stosowanych w tej odpowiedzi, to jest tutaj:

referencyjny: Initial Selection In AngularJS ng-options with track by

Oto co pracował dla ja:

app.controller('fooController', function($scope){ 
    $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}]; 
    $scope.user = {}; 
    $scope.user.roles = [ $scope.roles[0] ]; 
});

Wystąpił błąd w plunk, który nie został zainicjowany user, poza tym Angular porównałby każdy obiekt w tablicy ng-options do każdego elementu w tablicy ng-model. Porównanie JavaScript nie porównywanie kątowe, porównywanie 2 obiektów nawet z tymi samymi właściwościami w JavaScript zwraca false (różne obiekty).

upadać: http://plnkr.co/edit/ccsAVvPACnN6Qzje7HcB?p=preview

To nie jest idealne. Zwykle chcesz skorelować te na podstawie identyfikatora lub tak, tutaj jest inny sposób:

W HTML, użyj track by powiedzieć angularjs porównać identyfikatory zamiast całych obiektów:

<select multiple class="form-control" 
    data-ng-model="user.roles" 
    data-ng-options="role.name for role in roles track by role.id" 
    required=""></select>

wówczas w kontrolerze, można użyć dowolnego obiektu bez rzeczywiście w tablicy:

app.controller('fooController', function($scope){ 
    $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}]; 
    $scope.user = {}; 
    $scope.user.roles = [ {id:1, name:"Administrator"} ]; 
});

upadać: http://plnkr.co/edit/NKLXrwqwk36YfhBSXILN?p=preview

Zauważ, że ja nawet nie ne ed właściwość name. Chodzi o to, by później zrobić właściwy obiekt, ale teraz nie jest potrzebny do dopasowania, spróbuj bez niego!

Napisałem szczegółowy samouczek z towarzyszącym filmem dotyczącym początkowego problemu selekcji i jego odmian. Skupia się na pojedynczym wyborze, ale wybór wielokrotny polega na bezpośrednim użyciu tablicy obiektów zamiast jednego obiektu.

Sprawdź to, aby uzyskać więcej zrozumienia - wysoce zalecane:

Initial Selection In AngularJS ng-options with track by

Poinformuj mnie w komentarzach, jeśli wciąż zmagasz się z tym.

Źródło

2014-12-08 05:01:18 Meligy

Naprawdę jasne wyjaśnienie! Dziękuję bardzo za pomoc. – lvarayut

Uratował mnie jeden dzień mojego życia dzięki –

Zawsze miło mi pomóc :) – Meligy

jak ten

<body ng-init="role.name = roles[0].name" data-ng-app="role" data-ng-controller="fooController"> 
    <select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select> 
</body>

Źródło

2014-12-08 04:17:00

Twój Plunkr zawiera błędy. Przed użyciem należy zdefiniować $scope.user = {};. Wtedy to zadziała.

Uwaga: Ustawi to tylko wartość początkową modelu. Jeśli chcesz, aby administrator był domyślnie wyróżniony, musisz znaleźć inny sposób.

Źródło

2014-12-08 04:38:53 Lihini

jeśli dany model jest jak $scope.user.roles = [1]; wówczas ng-options powinno być tak,

data-ng-options="role.id as role.name for role in roles"

to wybierze tylko ID

jeśli zrobisz jak data-ng-options="role.name for role in roles" wówczas model powinien być jak

$scope.user.roles = [{id:1, name:"Administrator"}];

ponieważ spowoduje to zaznaczenie całego obiektu

aw kontrolerze

$scope.user = {}; //this line should be add

ponieważ próbujesz uzyskać dostęp do roles własność user ale nie ma user przedmiot zdefiniowane, będzie to również wystąpić błąd

oto Updated Plunker

tutaj jest zaktualizowany plunker1 plunker2 dla Twojego przypadku ng-options

można użyć tutaj ng-init tutaj. proszę sprawdzić.

Źródło

2014-12-08 04:40:34

Dziękuję za odpowiedź. kiedy spróbowałem twojego drugiego podejścia, nie działało ono zgodnie z oczekiwaniami. Zobacz [plunkr] (http://plnkr.co/edit/xwYtRjilBqr2pK3NlHUd?p=preview). – lvarayut

tak, wybierz wartość, możesz być tego pewien, ponieważ możesz zobaczyć wybrane wartości w '{{user.roles}}', ale nie pokazuje się w polu wyboru. nie wiem dlaczego :( –

Właściwie, próbowałem znaleźć rozwiązanie przez dwie godziny, stosując takie samo podejście jak drugie podejście, ale nadal nie mogę tego rozgryźć. :(BTW +1 za twoją pomoc. daj mi znać, jeśli możesz to rozgryźć! – lvarayut

Jak ustawić wartość domyślną dla opcji ng (wielokrotnego wyboru)?

Odpowiedz

Powiązane problemy