HLJ 发布于
2018-08-15 13:24:40

AngularJS过滤器函数搜索功能代码

上一篇文章:

AngularJS日期过滤器代码

下一篇文章:

AngularJS LimitTo过滤器

AngularJS过滤器函数搜索功能代码

实例1 html代码:
<body ng-app="AngularfilterApp">
  <div ng-controller="filterctrl">
  Enter Name to Filter:<input ng-model="searchtxt" type="text" placeholder="Flter key">
    <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="user in users | filter : searchtxt">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
    </tr>
    </table>
  </div>
</body>
实例2 html代码:
<body ng-app="AngularfilterApp">
  <div ng-controller="filterctrl">
    Only Name to Filter:<input ng-model="searchtxt.name" type="text" placeholder="Enter Only Name"><br /><br />
    Only Age to Filter:<input ng-model="searchtxt.age" type="text" placeholder="Enter Only Age"><br /><br />
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr ng-repeat="user in users | filter : searchtxt">
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
      </tr>
    </table>
  </div>
</body>
JavaScript代码:
<script>
var app = angular.module("AngularfilterApp", []);
app.controller("filterctrl", function ($scope) {
  $scope.users = [{
    name: "Madhav Sai",
    age: 11
  }, {
    name: "Suresh Dasari",
    age: 29
  }, {
    name: "Rohini Alavala",
    age: 29
  }, {
    name: "Praveen Kumar",
    age: 24
  }];
});
</script>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-15/94.html
最后生成于 2024-05-27 22:52:55
上一篇文章:

AngularJS日期过滤器代码

下一篇文章:

AngularJS LimitTo过滤器

此内容有帮助 ?
0