problem
mam pola kombi zasadzie select element, który jest wypełniony za pomocą szeregu obiektów złożonych przez ng-options. Gdy aktualizuję dowolny obiekt z kolekcji na drugim poziomie, zmiana ta nie jest stosowana do pola kombi.ponownie czyni ng opcje po zmianie drugiego poziomu poboru
Jest również documented na stronie internetowej angularjs:
Zauważ, że
$watchCollectionrobi płytkie porównanie właściwości przedmiotu (lub przedmiotów w kolekcji, jeśli model jest tablicą). Oznacza to, że zmiana właściwości głębiej niż pierwszy poziom w obiekcie/kolekcji nie spowoduje ponownego renderowania.
kątowe widok
<div ng-app="testApp">
<div ng-controller="Ctrl">
<select ng-model="selectedOption"
ng-options="(selectedOption.id + ' - ' + selectedOption.name) for selectedOption in myCollection track by selectedOption.id">
</select>
<button ng-click="changeFirstLevel()">Change first level</button>
<button ng-click="changeSecondLevel()">Change second level</button>
<p>Collection: {{ myCollection }}</p>
<p>Selected: {{ selectedOption }}</p>
</div>
</div>
kątowa kontroler
var testApp = angular.module('testApp', []);
testApp.controller('Ctrl', ['$scope', function ($scope) {
$scope.myCollection = [
{
id: '1',
name: 'name1',
nested: {
value: 'nested1'
}
}
];
$scope.changeFirstLevel = function() {
var newElem = {
id: '1',
name: 'newName1',
nested: {
value: 'newNested1'
}
};
$scope.myCollection[0] = newElem;
};
$scope.changeSecondLevel = function() {
var newElem = {
id: '1',
name: 'name1',
nested: {
value: 'newNested1'
}
};
$scope.myCollection[0] = newElem;
};
}]);
Można również uruchomić go na żywo w this JSFiddle.
Pytanie
rozumiem, że angularjs nie oglądać skomplikowanych obiektów w ng-options ze względu na wydajność. Ale czy istnieje sposób obejścia tego problemu, tj. Czy mogę ręcznie uruchomić ponowne renderowanie? Niektóre posty wspominają o rozwiązaniu jako $timeout lub $scope.apply, ale nie mogłem ich wykorzystać.
Możesz po prostu umieścić $ scope.selectedOption = newElem; wewnątrz funkcji $ scope.changeSecondLevel() – Vivz
Nie, chcę zaktualizować kolekcję. Ustawienie wybranego elementu bezpośrednio nie jest opcją. W mojej aplikacji '' changeSecondLevel() '' wykonuje żądanie HTTP, które zwraca cały zestaw nowych elementów, które ponownie przypisuję do '' myCollection''. Właśnie wybrałem tutaj jeden element dla uproszczenia. – user1438038
Czy w Twojej aplikacji wartość 'id' jest unikatowa w' myCollection'? A kiedy mówisz, że zmieniasz przypisanie 'myCollection', czy robisz' myCollection = ... 'lub czy przeglądasz listę jak w twoim przykładzie i czy' myCollection [i] = ... '? – user2718281