AngularJS 过滤器

AngularJS 过滤器

    1.使用：过滤器可以通过管道符号（|）添加到表达式和指令中。

    2.转换数据的方式：

       

过滤器	描述
currency	数字转货币
filter	从数组中选择一个项
lowercase	转小写
orderby	根据表达式排序数组
uppercase	转大写

    实例：

   

<script src="../scripts/angerlarjs.min.js"></script>

   <div ng-app="Myapp" ng-controller="MyController">
        <!--通过ng-model绑定输入域到控制器的属性-->
        姓：<input type="text" ng-model="FirstName" />
        <br />
        名：<input type="text" ng-model="LastName" />
        <br />双向绑定
        姓名：{{FirstName | uppercase }} {{LastName | lowercase }}
        使用方法得到的姓名：{{Fname()}}
    </div>
    <script src="../scripts/PersonController.js"></script>

 

 PersonController.js

//1.创建angerlarjs程序    2.定义控制器   3.定义$scope保持Model对象

var app = angular.module("Myapp", []).controller("MyController", function ($scope) {
    //在作用域中创建两个属性
    $scope.FirstName = "a";
    $scope.LastName = "b";
    $scope.Fname = function () {
        return $scope.FirstName + $scope.LastName;
    }
});

 

向指令中添加过滤器和过滤输入

 <div ng-app="Myapp" ng-init="names=[{name:'licong',age:'16'},{name:'zrf',age:'15'}]" ng-controller="MyController">
        <!--通过ng-model绑定输入域到控制器的属性-->
        <!--姓：<input type="text" ng-model="FirstName" />
        <br />
        名：<input type="text" ng-model="LastName" />
        <br />双向绑定
        姓名：{{FirstName | uppercase }} {{LastName | lowercase }}
        使用方法得到的姓名：{{Fname()}}
        <br />
        数量：<input type="text" ng-model="count" /><br />
        *<br />
        单价：<input type="text" ng-model="price" /><br />
        总和：{{AllPrice() | currency}}<br />-->

       <!--过滤输入-->
        <input type="text" ng-model="tests" />
        <ul>
            <li ng-repeat="x in names | filter:tests | orderBy:'age'">
                {{(x.name | uppercase)}}
            </li>
        </ul>
    </div>