Używam Angular JS i muszę ustawić wybraną opcję kontrolki listy rozwijanej za pomocą kątowego JS. Wybacz mi, jeśli to śmieszne, ale jestem nowy w Angular JS
Oto rozwijana lista kontrolna mojego HTML
<select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
ng-show="item.id==8" ng-model="item.selectedVariant"
ng-change="calculateServicesSubTotal(item)"
ng-options="v.name for v in variants | filter:{type:2}">
</select>
Po zapełnieniu otrzymuję
<select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 && item.quantity > 0" class="ng-pristine ng-valid ng-valid-required">
<option value="?" selected="selected"></option>
<option value="0">set of 6 traits</option>
<option value="1">5 complete sets</option>
</select>
Jak mogę ustawić kontrolkę value="0"
do wybrania?
<option value="0" ng-selected="true">set of 6 traits</option>
Odpowiedzi:
Mam nadzieję, że rozumiem Twoje pytanie, ale
ng-model
dyrektywa tworzy dwustronne powiązanie między wybranym elementem w kontroli a wartościąitem.selectedVariant
. Oznacza to, że zmianaitem.selectedVariant
w JavaScript lub zmiana wartości w kontrolce aktualizuje drugą. Jeśliitem.selectedVariant
ma wartość0
, ten element powinien zostać wybrany.Jeśli
variants
jest tablicą obiektów,item.selectedVariant
należy ustawić na jeden z tych obiektów. Nie wiem, jakie informacje masz w swoim zakresie, ale oto przykład:JS:
HTML:
To pozostawiłoby element „b” do wyboru.
źródło
$scope
zmiennej. Zakładając więc, że znajdujesz się w jednym zakresie, możesz powiedzieć$scope.item.selectedVariant = 0
, że w kontrolerze ustawisz domyślną wybraną wartość. Możesz także ustawić zmienną bezpośrednio w kontrolce, w HTML, używając dyrektywy ng-init , ale moim zdaniem robi się to dość niechlujne!variants
jest w twoim zakresie? Musiałbyś ustawićitem.selectedVariant
dokładnie na elementvariants
.Nie wiem, czy to komuś pomoże, czy nie, ale ponieważ miałem ten sam problem, pomyślałem, aby podzielić się tym, w jaki sposób uzyskałem rozwiązanie.
Możesz użyć atrybutu śledzenia według w swoim
ng-options
.Załóżmy, że masz:
Możesz wspomnieć o swoim
ng-options
jako:Mam nadzieję, że to pomoże komuś w przyszłości.
źródło
ngModel
poprawnie, ale nie działało, dopóki nie dodałemtrack by
! Dziękuję Ci!Jeśli przypiszesz wartość 0
item.selectedVariant
, powinna zostać wybrana automatycznie. Sprawdź przykład na http://docs.angularjs.org/api/ng.directive:select, który domyślnie wybiera czerwony kolor, po prostu przypisując$scope.color='red'
.źródło
Widzę, że napisałem już dobre odpowiedzi, ale czasami napisanie tego samego w innej formie może być pomocne
źródło
Prosta droga
Jeśli masz użytkowników jako odpowiedź lub zdefiniowaną tablicę / JSON, najpierw musisz ustawić wybraną wartość w kontrolerze, a następnie umieścić tę samą nazwę modelu w html. Ten przykład napisałem, aby wyjaśnić w najprostszy sposób.
Prosty przykład
kontrolera wewnętrznego:
Twój kod HTML
złożony przykład
Inside Controller:
Twój kod HTML
źródło
Może się przydać. Wiązania nie zawsze działają.
Na przykład. Wypełniasz listę opcji modelu źródłowego z usługi rest-service. Wybrana wartość była znana przed wypełnieniem listy i została ustawiona. Po wykonaniu żądania ponownego uruchomienia z opcją listy $ http należy wykonać. Ale wybrana opcja nie jest ustawiona. Z nieznanych powodów AngularJS w shadow $ Digest nie wykonuje wiązania wybranego tak, jak powinno. Muszę użyć JQuery, aby ustawić wybrane. To ważne! Kątowy w cieniu dodaje prefiks do wartości attr „value” dla wygenerowania przez ng-repeat optinos. Dla int jest to „liczba:”.
źródło
Spróbuj wykonać następujące czynności:
Plik JS
Plik HTML
źródło
To jest kod jakiego użyłem dla ustawionej wybranej wartości
wypróbuj to na kątowej ramie
źródło
JS:
źródło