Question

我的应用列表通过ng-repeat填充表格，如下所示：

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

点击Name字段中的链接，我想用详细的联系人填充详细信息页面。

现在我将contact.id传递给第二个控制器，以便第二次调用服务器并使用＆＃34; GET CONTACT BY NAME＆＃34;来检索数据。

我的问题是：

如果我已经拥有DOM中的所有联系人，那么过滤然后显示并且不显示第二次调用服务器会更好吗？

有类似ng-repeat where id=id的内容吗？因此，我想点击并过滤DOM中的数据，而无需再次访问服务器，因为我已经拥有了所有需要的数据。

Answer 1

您可以在循环中找到控制器中具有特定ID的联系人，然后

vm.contacts = [contact]

但如果你有太多的联系人，它会比查询数据库慢。

Answer 2

我不知道它是否可以帮助您，但如果您想保留已从服务器读取的模型值，我认为您必须使用相同的页面。

我对您的代码进行了一些更改。看看这个：

<强> 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'
      }
    ]
  };
});

您可以在此Plunker中看到此代码：https://plnkr.co/edit/C47PM72TBTZr2lGspQNB

是否可以使用ng-repeat WHERE id = value？

2 个答案: