Dlaczego angularJs aktualizuje wszystkie elementy array/hashmap, jeśli tylko jeden się zmienił?
Mam prosty hashmap i prostą metodę, która wyświetla status w tekście, ale kiedy aktualizuję tylko 1 status użytkownika, wszystkie one aktualizują (funkcja jest wywoływana dla wszystkich użytkowników). Czy istnieje sposób, aby zaktualizować tylko jedną pozycję, a nie wszystkie?
Przykładowy kod znajduje się tutaj, po prostu zobacz, co dzieje się w konsoli po kliknięciu przycisku „Zmień stan”.
HTML:
<div ng-app="myApp">
<div ng-controller="Ctrl">
<div class="user-panel" ng-repeat = "(id, user) in _users">
Status:
<span class="user-status{{user.status}}">
{{getStatusInText(user.status)}}
</span>
<hr>
<div class="toLeft">([b]{{id}}[/b]) {{user.name}}
<div class="toRight">
<button ng-click="changeUserStatus(id, '1')">Change Status</button>
<div class="clear">
AngularJS:
var app = angular.module('myApp', []);function Ctrl($scope) {
$scope._users = {"123":{"name":"test","status":"0"}, "124":{"name":"test2", "status":"0"},"125":{"name":"test2", "status":"0"}}; $scope.getStatusInText = function(status) {
console.log("CALLED: " + status);
return (status === "1") ? "online" : "offline";
} $scope.changeUserStatus = function(uId, status) {
$scope._users[uId].status = status; }
}I skrzypce do powyższego przykładu:
http://jsfiddle.net/ztVnj/3
http://jsfiddle.net/ztVnj/3/
kolejny przykład z iteracją, która jest wywoływana za każdym razem za pomocą funkcji getStatusInText.
http://jsfiddle.net/ztVnj/4
http://jsfiddle.net/ztVnj/4/
/
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
1 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Zaktualizowany przykład
:
http://jsfiddle.net/ztVnj/5
http://jsfiddle.net/ztVnj/5/
/
Teoria tutaj
:
Przenieś kosztowną operację poza hashmap i ręcznie zarządzaj aktualizacją. Jak wspomniano, jeśli hashmap w ogóle się zmieni, to całe powtórzenie ng jest przerysowywane.
Zmiany
:
Powiązanie z $ scope, dodaje tablicę w celu zamapowania wartości stanu na identyfikatory.
$scope._users = {"123":{"name":"test","status":"0"}, "124":{"name":"test2", "status":"0"},"125":{"name":"test2", "status":"0"}};$scope._userStatus = [];
Zmień szablon, aby zamiast tego wyszukać tę tablicę:
Status: <span class="user-status{{user.status}}">{{_userStatus[id]}}</span>Zaktualizuj funkcję changeStatus, aby była jedynym miejscem aktualizacji tekstu statusu, a następnie wykonaj jedną początkową iterację na początku.
$scope.changeUserStatus = function(uId, status) {console.log("Button Clicked.");
$scope._userStatus[uId] = $scope.getStatusInText(status);
}angular.forEach($scope._users, function(user, uId) {
$scope._userStatus[uId] = $scope.getStatusInText(user.status);
});