Is it possible to use ng-repeat WHERE id = value?

Question

My app list populate a table via ng-repeat like this:

<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>

By clicking the link in the Name field, I want to populate the detail page with the specific of that contact.

Now I am passing the contact.id to a second controller to make a second call to the server and retrieve the data with a "GET CONTACT BY NAME".

MY QUESTION IS:

If I have already ALL the Contacts in the DOM, should it be better to filter then and show without a second call to the server?

Is there something like ng-repeat where id=id? So I would like to click and filter the data in the DOM without going again to the server, since I have all the needed data already in front of me.

There is [filter](https://docs.angularjs.org/api/ng/filter/filter) something like `ng-repeat="contact in vm.contacts | filter:{id:someId}"` — ste2425, Aug 12 '16 at 12:48
yes. here's link to doc https://docs.angularjs.org/api/ng/filter/filter — Yogesh, Aug 12 '16 at 12:50
though you can technically do that by storing data in some shared factory but you should avoid that.. making api call is better, to avoid stale data issues, list to details, always make api call — harishr, Aug 12 '16 at 12:50
also check this link http://stackoverflow.com/questions/14733136/ng-repeat-filter-by-single-field — Yogesh, Aug 12 '16 at 12:51
@WaldirJ.PereiraJunior Sorry for the delayed answer. I tested your answer, but it did not work since I am pulling Data from a Database via $http , no working with $scope. In the other hand, I have to pass an object in "contact" from one controller (listController) to another controller (editController) — Rafael Munoz, Aug 16 '16 at 08:26
I know you get your data from database. I just wrote an exemple. About the controllers I think you might give a full example on Plunker, so the community can helps you. — Waldir J. Pereira Junior, Aug 16 '16 at 11:56

score 0 · Answer 1 · answered Aug 12 '16 at 12:51

0

You can find the contact with specific id in the controller in a loop and then

vm.contacts = [contact]

But it will be slower than querying a database if you have too many contacts.

answered Aug 12 '16 at 12:51

Bünyamin Sarıgül

3,031
4
30
55

score 0 · Answer 2 · answered Aug 12 '16 at 13:27

I don't know if it can help you, but I think you must use the same page if you want to keep the model values already read from server.

I made some changes on your code. 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'
      }
    ]
  };
});

You can see this code in action at this Plunker: https://plnkr.co/edit/C47PM72TBTZr2lGspQNB

Is it possible to use ng-repeat WHERE id = value?

2 Answers2