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?

1
user1226868 13 sierpień 2014, 22:00

3 odpowiedzi

Najlepsza odpowiedź

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>
0
user1226868 13 sierpień 2014, 19:25

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
    }
}]);
1
V31 13 sierpień 2014, 18:39

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>
0
L42y 13 sierpień 2014, 18:35