2

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

4

1 回答 1

2

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

完成相同要求的表单我会为搜索文本框创建一个虚拟字段，然后我会将其分配给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

于 2015-04-07T06:56:37.803 回答