如何使用提交按钮搜索表中的记录？答案

【问题标题】：How to use submit button to search the record in a table?如何使用提交按钮搜索表中的记录？
【发布时间】：2015-06-11 15:37:06
【问题描述】：

这是我的 index.html 页面 ------index.html------

     <!DOCTYPE html>
         <html>
         <head>
             <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6"
     src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>   
             <script src="script.js"></script>
         </head>
         <body>

     <div ng-app="myApp" ng-controller="PeopleCtrl"> <input type="text"
     name="search1" >

     <input type="submit" ng-model="search1"   value="search"
     ng-click="checkAll"> <table border="1"  ng-init="ageToShow=(people|
     underTwenty: 20).length >= 1">


     <tr name="search1" > <th>Id</th> <th>Name</th> <th ng-show="ageToShow"
    ng-if="!ageToShow">Age</th> </tr> <tr ng-repeat="person in
     people|filter: search" ng-show="person.age>20" >
     <td><span>{{person.id}}</span> </td> <td><span>{{person.name}}</span>
     </td> <td ng-show="!ageToShow"><span>{{person.age}}</span> </td> </tr>
     </table>

     </div> </body> </html>

我需要的是使用提交按钮来搜索记录...。这是我的 script.js 文件...

--------script.js--------
     // Code goes here



     var myApp = angular.module('myApp', []);

     myApp.controller('PeopleCtrl', function($scope,$filter) {

       $scope.people = ([{
         id: 1,
         name: "Peter",
         age: 22   }, {
         id: 2,
         name: "David",
        age: 12   }, {
         id: 3,
         name: "Anil",
         age: 32   }, {
         id: 4,
         name: "Chean",
         age: 22   }, {
         id: 5,
         name: "Niladri",
         age: 18   }
         ]);





        $scope.people3 = $scope.people;

         $scope.$watch('search1', function(val)
         { 
            $scope.people = $filter('filter')($scope.people3, val);
         });



          }); myApp.filter('underTwenty', function() {

       return function(values, limit) {
         var returnValue = [];
        angular.forEach(values, function(val, ind) {
           if (val.age < limit)

            returnValue.push(val);
             });   return returnValue;   }; });

这是我在 plunker 中的编码：http://plnkr.co/edit/?p=preview

【问题讨论】：

plunker 中没有代码....
plnkr.co/edit/BhkbPXqcApA3BOm30qdG?p=preview
对不起，我更新了，没有保存........
我不会使用提交，而是简单地使用不同的ng-model 搜索文本框，然后单击按钮将其绑定到search 变量，例如ng-click= search=dummySearch
@anilchean 检查这个 plunkr 我认为你的 $watch 有问题。看看这个plnkr.co/edit/o9SOH9IT7mLlHo0mafC3?p=preview，如果你需要什么，请告诉我

标签： javascript angularjs forms angularjs-filter angularjs-forms

【解决方案1】：

仅用于过滤如果您打算提交表单，那么我建议您不要更喜欢表单提交。

完成相同要求的表单我将为搜索文本框创建一个虚拟字段，然后将其分配给 search 模型，我们将其用于过滤点击搜索 ng-click="search = search1"

HTML

<input type="text" name="search1" ng-model="search1"/>
<input type="button" value="search" ng-click="search = search1">
<table border="1" ng-init="ageToShow=(people| underTwenty: 20).length >= 1">
  <tr name="search1">
    <th>Id</th>
    <th>Name</th>
    <th ng-show="ageToShow" ng-if="!ageToShow">Age</th>
  </tr>
  <tr ng-repeat="person in people|filter: search" ng-show="person.age>20">
    <td><span>{{person.id}}</span> 
    </td>
    <td><span>{{person.name}}</span>
    </td>
    <td ng-show="!ageToShow"><span>{{person.age}}</span> 
    </td>
  </tr>
</table>

& 请从search1 变量中删除手表。所以search1的变化不会发生过滤

Working Plunkr

【讨论】：