Question

我确定这并不难，但如果有人能帮助我的话。

<form ng-submit="submit()">
  <input ng-model="query">
  <button type="submit" id="submit" value="Submit" >Search</button>
</form>


<div ng-repeat="x in friends | filter:query">
  {{x.name}}
</div>

我希望过滤搜索提交而不是动态输入我猜测它可以通过ng-click或ng-submit完成。只是在一个很好的方式之后。

Answer 1

试试此代码，请参阅下面的输出。

首先你需要在范围上设置另一个变量并按该变量过滤，在submit（）上使“查询”模型的值等于范围内的“q”变量，因为过滤标准是“q” “现在

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
    $scope.q="";
    
    $scope.submit=function(){
      $scope.q= $scope.query
    }
    $scope.friends = [
    {
        id: 1,
        name: "Sarah"
    },
    {
        id: 2,
        name: "Joanna"
    },
    {
        id: 3,
        name: "Heather"
    },
    {
        id: 4,
        name: "Kim"
    }
    ];
    

});

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <form ng-submit="submit()">
    <input ng-model="query">
    <button type="submit" id="submit" value="Submit">Search</button>
  </form>


  <div ng-repeat="x in friends | filter:q">
    {{x.name}}
  </div>
</body>

</html>

Answer 2

使用ng-model-options ...

可以使用Angular.js 1.3.x轻松实现

<form ng-submit="submit()">
  <input ng-model="query" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }">
  <button type="submit" id="submit" value="Submit" >Search</button>
</form>

http://plnkr.co/edit/9JHnSXAldpm7Yb9Bl2gC?p=preview

它允许您自定义延迟，而不是在您键入时立即执行，但它不在提交中。

使用ng-submit上的ng-model通过输入过滤ng-repeat

2 个答案: