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

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

本文关键字：记录 搜索表 按钮 何使用 提交      更新时间：2023-09-26

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

仅用于筛选，如果您计划提交表单，那么我建议您不要选择表单提交。

表单得到了同样的要求，我会为搜索文本框创建一个伪字段&然后我会把它分配给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 发生变化时不会发生过滤

工作Plunkr

相关文章：