Od jakiegoś czasu używam AngularJów, a to działa dobrze. Jednak ostatnio mam problemy z myślami o zestawach danych.
Powiedzmy, że mam szereg przedmiotów:
[
{ id: 1, votes: 10, detailInformation: 'Interesting #1' },
{ id: 2, votes: 12, detailInformation: 'Interesting #2' }
]
Ustawiam $ Timer, aby pobrać te informacje co 60 sekund uformować odpoczynek WebService, aby zapewnić użytkownikowi najbardziej aktualne informacje.
Te elementy są wyświetlane w następnym formacie użytkownika:
| ID: {{item.id}} Votes: {{item.votes}} |
| <span data-ng-click="item.showInfo = true">Click here to view detail info</span> |
| <span data-ng-show="item.showInfo == true">{{item.detailInformation}}</span> |
Ten przykład działa dobrze, ale gdy timer pobiera nową zawartość, która wyrzuca stan widoku (Item.showinfo = true). Co to jest (lub są) najlepszą praktyką dla tego rodzaju sytuacji? Jak mogę oddzielić ten stan tylko dla klienta z informacji o serwerze, które muszą być aktualne?
3 odpowiedzi
Dzięki V31 za danie mi pomysł, ale pracowałem trochę bardziej ogólne:
// In your controller
$scope.items = [] // Contains the webservice data
$scope.itemsViewState = {} // Map that will contain all the viewstate with the ID as key.
HTML:
<div ng-repeat="item in items">
ID: {{item.id}} <br />
Votes: {{item.votes}} <br />
<span data-ng-click="itemsViewState[item.id] = true">Click here to view detail info</span>
<span data-ng-show="itemsViewState[item.id] == true">{{item.detailInformation}}</span>
</div>
W przypadku, gdy musisz zapisać wiele właściwości na obiekt, pamiętaj, aby utworzyć mapę na poziomie, które GO GHEEP:
// In your controller
$scope.items = [] // Contains the webservice data
$scope.itemsViewState = {} // Map that will contain all the viewstate with the ID as key.
$scope.openDetail = function($item) {
$scope.itemsViewState[item.id] = {};
$scope.itemsViewState[item.id]['subprop'] = true; }
HTML:
<div ng-repeat="item in items">
ID: {{item.id}} <br />
Votes: {{item.votes}} <br />
<span data-ng-click="openDetail(item)">Click here to view detail info</span>
<span data-ng-show="itemsViewState[item.id]['subprop'] == true">{{item.detailInformation}}</span>
</div>
W kontrolce musisz dodać program showinfo jako osobnego obiektu, a nie dołączać w obiekcie odpowiedzi, który pochodzi z serwera, więc coś w tym w swoim kontrolerze:
app.controller('test', ['$scope','urService',function($scope,urService){
$scope.showInfo = true;
urService.getData(function(data){
//update data in the another scope object
}
}]);
Proponuję przechowywać item.showInfo na różnych odniesieniach:
JS:
$http.get('/api/endpoint').then(function (data) {
$scope.items = data;
$scope.isShown = new Array(data.length); // set $scope.isShown at the first time receive data;
}
HTML:
<div ng-repeat="item in items">
<button ng-click="isShown[$index] = true">Click here to view detail info</button>
<span ng-show="isShown.[$index]">{{ item.detailInformation }}</span>
</div>