Ist es möglich, ng-repeat WHERE id = Wert zu verwenden?

Question

Meine App-Liste eine Tabelle über ng-repeat wie folgt füllen:

<div ng-app="myapp"> 
    <table ng-controller="mycontroller"> 
     <thead class="thead-inverse"> 
      <tr> 
       <th>Name</th> 
       <th>Email</th> 
       <th>Company></th> 
       <th>Adresse </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class ng-repeat="contact in vm.contacts"> 
       <td><a ng-href="/details/{{contact.id}}">{{contact.firstName}} {{contact.lastName}}</a></td> 
       <td>{{contact.email}}</td> 
       <td>{{contact.companyName }}</td> 
       <td>{{contact.street}}. {{contact.zip}}, {{contact.city}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Durch den Link in der Name Feld klicken, möchte ich mit dem spezifischen dieses Kontakts die Detailseite füllen.

Jetzt übergebe ich die contact.id an einen zweiten Controller, um einen zweiten Anruf zum Server zu machen und die Daten mit einem "GET CONTACT BY NAME" abzurufen.

meine Frage:

Wenn ich schon alle Kontakte im DOM, sollte es besser sein, dann filtern und an den Server ohne einen zweiten Anruf zeigen?

Gibt es etwas wie ng-repeat where id=id? Also würde ich gerne auf die Daten im DOM klicken und filtern, ohne nochmal auf den Server zu gehen, da ich alle benötigten Daten bereits vor mir habe.

Answer 1

Sie können den Kontakt mit bestimmten ID in der Steuerung in einer Schleife finden und dann

vm.contacts = [contact] 

Aber es wird langsamer sein als die Abfrage einer Datenbank, wenn Sie zu viele Kontakte haben.

Answer 2

Ich weiß nicht, ob es Ihnen helfen kann, aber ich denke, Sie müssen die gleiche Seite verwenden, wenn Sie möchten, dass die Modellwerte bereits vom Server gelesen werden.

Ich habe einige Änderungen an Ihrem Code vorgenommen. Check this out:

HTML:

<div ng-app="myapp"> 
    <div ng-controller="mycontroller"> 
     <div ng-if="editedContact"> 
     <p>Contact</p> 
     <div>Id: {{editedContact.id}}</div> 
     <div>First Name: 
      <input type="text" ng-model="editedContact.firstName" /> 
     </div> 
     <div>Last Name: 
      <input type="text" ng-model="editedContact.lastName" /> 
     </div> 
     <input type="button" value="Cancel" ng-click="cancelEditContact()" /> 
     <input type="button" value="Save" ng-click="saveContact()" /> 
     </div> 

     <table ng-if="!editedContact"> 
     <thead class="thead-inverse"> 
      <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Company></th> 
      <th>Adresse </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class ng-repeat="contact in vm.contacts"> 
      <td><a href ng-click="editContact(contact)">{{ contact.firstName}} {{ contact.lastName}}</a></td> 
      <td>{{ contact.email}}</td> 
      <td>{{ contact.companyName }}</td> 
      <td>{{ contact.street}}. {{ contact.zip}}, {{ contact.city}}</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 

JavaScript:

var app = angular.module('myapp', []); 

app.controller('mycontroller', function($scope) { 

    $scope.editedContact = null; 

    $scope.editContact = function(contact){ 
    $scope.editedContact = angular.copy(contact); 
    }; 

    $scope.saveContact = function(){ 
    var index = $scope.vm.contacts.map(function(c) { return c.id; }).indexOf($scope.editedContact.id); 
    $scope.vm.contacts[index] = angular.copy($scope.editedContact); 
    $scope.editedContact = null; 
    }; 

    $scope.cancelEditContact = function() { 
    $scope.editedContact = null; 
    }; 

    $scope.vm = { 
    contacts: [ 
     { 
     id: 1, 
     firstName: 'Aname', 
     lastName: 'Alast', 
     email: 'aa@aa.aa', 
     companyName: 'Acorp', 
     street: 'Astreet', 
     zip: '111', 
     city: 'Acity' 
     }, 
     { 
     id: 2, 
     firstName: 'Bname', 
     lastName: 'Blast', 
     email: 'aa@aa.aa', 
     companyName: 'Bcorp', 
     street: 'Bstreet', 
     zip: '111', 
     city: 'Bcity' 
     }, 
     { 
     id: 3, 
     firstName: 'Cname', 
     lastName: 'Clast', 
     email: 'aa@aa.aa', 
     companyName: 'Ccorp', 
     street: 'Cstreet', 
     zip: '111', 
     city: 'Ccity' 
     } 
    ] 
    }; 
}); 

Sie diesen Code in diesem Plunker in Aktion sehen können: https://plnkr.co/edit/C47PM72TBTZr2lGspQNB