angularjs过滤器实例实现即时查询显示

最新推荐文章于 2018-12-25 15:50:52 发布

置顶 KinGofWorLd_v587

最新推荐文章于 2018-12-25 15:50:52 发布

阅读量1.2w

点赞数

分类专栏： anglarjs

本文链接：https://blog.csdn.net/zhy421202048/article/details/51517809

版权

anglarjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码如下：

首先我们要定义一个filte 为query 当所有符合query的字母出现后便会绑定到{{name.name}}上显示出来

<html  ng-app="myApp"  ng-controller="customersCtrl">
<head><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head>
<body>
<style>

    .span2{color: red}
    .span3{color: blue}
</style>
<div  >
    <div class="container-fluid">
        <div class="row-fluid">
            <div ng-class={'span2':isselect,'span3':span3}  ng-click="change()">
                <!--Sidebar content-->

                名称: <input ng-model="query">

            </div>
            <div class="span10">
                <!--Body content-->

                <ul class="phones">
                    <li ng-repeat="name in names | filter:query">
                        {{name.name}}
                       
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>
<script>

    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope, $http) {
    $scope.names=[{"name":"x明"},{"name":"夏红"},{"name":"lili"},{"name":"宝宝"},{"name":"zhy"},];
    });P

<html  ng-app="myApp"  ng-controller="customersCtrl">
<head><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head>
<body>
<style>

    .span2{color: red}
    .span3{color: blue}
</style>
<div  >
    <div class="container-fluid">
        <div class="row-fluid">
            <div ng-class={'span2':isselect,'span3':span3}  ng-click="change()">
                <!--Sidebar content-->

                名称: <input ng-model="query">

            </div>
            <div class="span10">
                <!--Body content-->

                <ul class="phones">
                    <li ng-repeat="name in names | filter:query">
                        {{name.name}}
                       
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>
<script>

    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope, $http) {
    $scope.names=[{"name":"x明"},{"name":"夏红"},{"name":"lili"},{"name":"宝宝"},{"name":"zhy"},];
    });