如何使用提交按钮搜索table中的记录？

Question

这是我的 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

Answer 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

如何使用提交按钮搜索table中的记录？

How to use submit button to search the record in a table?

javascript

angularjs

forms

angularjs-filter

angularjs-forms

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