Pytanie w angularjs, w jaki sposób otrzymasz `select` do odświeżenia, gdy zmieni się tablica dla opcji ng-options?


mieć select na podstawie dowolnej tablicy. elementy w tablicy mogą się zmieniać. jak mogę uzyskać kontroler kątowy do odświeżenia tablicy?

module.js

var langMod = angular.module ("langMod", []);
langMod.controller (.controller ('colorCntl', function ($ scope) {
  $ scope.color = 'wt';
  $ scope.colorArr = [
    {id: "br", nazwa: "brązowy"},
    {id: 'wt', name: 'white'}
  ];
});

index.html

<form ng-controller = 'wordCntl'>
  <wybierz ng-model = "color" ng-options = "c.id jako c.nazwa dla c w colorArr">
     <option value = ''> - wybierz kolor - </ option>
  </ select>
</ form>

z konsoli:

> scope = angular.element (document.querySelector ('select')). scope ();
> scope.colorArr.push ({id: 'bk', name: 'black'});
  3
Uwaga! menu rozwijane wyboru nadal ma kolor brązowy i biały, a nie czarny

jak mogę zdobyć select odświeżyć, aby wszystkie elementy w colorArr są opcje?


18
2017-11-09 04:36


pochodzenie




Odpowiedzi:


Zastosowania kątowe obserwatorzyi zaktualizuje tylko interfejs użytkownika, jeśli przetrawiaj pętlę został wyrzucony.

Zwykle dodajesz do tablicy za pośrednictwem jakiegoś zdarzenia w interfejsie użytkownika lub dzwoniąc do Usługa $ http, a ci troszczą się o wyrzucenie $ digest () dla Ciebie.

Ponieważ właśnie dodajesz bezpośrednio do tablicy, Angular nie wie, że coś się zmieniło i dlatego nie aktualizuje interfejsu użytkownika.

Owiń swoje oświadczenie wewnątrz scope.$apply(function(){ //code }); zamiast.


24
2017-11-09 04:42



w rzeczy samej, działa jak w reklamie. świetne wyjaśnienie! dzięki! - cc young
@josh czy można odświeżyć listę wyboru bez użycia scope.$apply? - starcorn
@starcorn - Każda aktualizacja występująca w pętli digest zaktualizuje się automatycznie. Musisz tylko zadzwonić scope.$apply kiedy robisz coś poza wiedzą Angulara. Na przykład, jeśli używasz biblioteki Ajax innej firmy (jQuery) lub zdarzenia, które nie zostało wywołane przez dyrektywę Angular. - Josh