Question

我是物化的新人所以我一直在查看文档，并且出现了疑问。要在导航栏中添加搜索框，他们会使用以下示例：

 <nav>
<div class="nav-wrapper">
  <form>
    <div class="input-field">
      <input id="search" type="search" required>
      <label for="search"><i class="material-icons">search</i></label>
      <i class="material-icons">close</i>
    </div>
  </form>
</div>

我的问题是，通常当我使用表单进行搜索时，我在提交按钮中放了一个ng-click="search(param)"，在这种情况下它不存在，那么我该如何利用angular来进行搜索呢？

Answer 1

您可以使用输入中的ng-change进行搜索，这样每次输入内容时都会调用一个事件

<nav>
  <div class="nav-wrapper">
    <form>
      <div class="input-field">
        <input type="search" ng-model="searchString" ng-change="searchFor(searchString)">
        <label for="search"><i class="material-icons">search</i></label>
        <i class="material-icons">close</i>
      </div>
    </form>
  </div>
</nav>

在您的控制器中，声明函数searchFor

angular.module('myApp').controller('searchController', SearchController);

function SearchController() {
  var vm = this;

  vm.searchFor = SearchFor;

  function SearchFor(searchString) {
    // Return if inputed less than 3 characteres
    if (searchString.length < 3)
      return;

    // else call your api to search for
    searchApi.get(searchString).success(onSuccess).error(onError);
  }
}

导航搜索带有materializecss和angular

1 个答案: