Question

我列出了一些联系人。并希望根据输入的值$ query过滤md-list。

  <md-contact-chips
                ng-model="ctrl.contacts"
                md-contacts="ctrl.delayedQuerySearch($query)"
                md-contact-name="name"
                md-contact-image="image"
                md-contact-email="email"
                md-require-match="true"
                md-highlight-flags="i"
                filter-selected="ctrl.filterSelected"
                placeholder="To">
        </md-contact-chips>

        <md-list class="memberList">
            <md-subheader class="md-no-sticky">Contacts</md-subheader>

                <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts | filter: $query"  <!--need set filter according to enrered value-->
                              ng-if="ctrl.contacts.indexOf(contact) < 0">

                    <img class="md-avatar"
                         ng-src="assets/images/avatars/avatar-1.png"
                         src="assets/images/avatars/avatar-1.png">
                    <div class="md-list-item-text compact">
                        <h3>{{contact.name}}</h3>
                        <p>{{contact.email}}</p>
                    </div>
                </md-list-item>
        </md-list>

很乐意提供帮助。谢谢。

Answer 1

“ query”是对AngularJS $resource的自定义操作。它可以使用OOTB-您无需创建特殊的代码即可注册或使用。

AngularJS教程中有一个很好的例子：

https://docs.angularjs.org/tutorial/step_05

app / phone-list / phone-list.template.html：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      Search: <input ng-model="$ctrl.query" />

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
          <span>{{phone.name}}</span>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

Answer 2

我认为$ query是在你的控制器中注入的东西。要在视图中使用它，您需要将其绑定到控制器的$ scope。

在你的控制器里面，请添加以下行，因为$ query是string类型。（即价值或常数）

$scope.query = $query;

我的感觉是$ query实际上是某种服务。如果是这种情况，它将具有某种访问函数来获取查询，例如getQuery（），假设是这种情况请将以下代码添加到控制器内。

$scope.query = $query.getQuery();
$scope.$watch(function() {
            return $query.getQuery();
        }, function(query){
            $scope.query = query;
        });

然后最后但并非最不重要的是将您的HTML更改为

filter: query

请注意这个问题有点宽泛，因为它没有解释$ query是什么..我希望这有助于...干杯

如何根据输入的$ query过滤列表？

2 个答案: