AngularJS 过滤器

it2022-06-23  88

过滤器可以使用一个管道字符(|)添加到表达式和指令中在一个表达式里面可以使用多个过滤器:ng-repeat="x in names | filter:test | orderBy:'country'"也可以在js里使用$filter来调用过滤器

app.controller('DemoController',['$scope','$filter', function($scope,$filter){ $scope.name=$filter('lowercase')('Ari'); }]);

过滤器类型如下:

   

还包括json/limitTo/number可以自定义过滤器

 

示例

动态计算

<div ng-app="myApp" ng-controller="costCtrl"> 计算乘法: <br /> 数量: <input type="number" ng-model="quantity"> 价格: <input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p> 计算加法: <br/> <!--type是number,数字--> 第一个数字:<input type="number" ng-model="firstNumber"> 第二个数字: <input type="number" ng-model="sencondNumber"> <p>总和 = {{ (firstNumber + sencondNumber) | currency }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.quantity = 1; $scope.price = 9.99; $scope.firstNumber = 123; $scope.sencondNumber = 321; }); </script>

数据排序、数据过滤

<div ng-app="myApp" ng-controller="namesCtrl"> <p>输入过滤:</p> <p> <!--test变量绑定--> <input type="text" ng-model="test"> </p> 列表1:<br /> <ul> <!--orderBy:'country'--> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> 列表2:<br/> <ul> <!--orderBy:'country'--> <!--过滤“test”变量--> <li ng-repeat="x in names | filter:test | orderBy:'name'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function ($scope) { $scope.names = [ { name: 'Jani', country: 'Norway' }, { name: 'Hege', country: 'Sweden' }, { name: 'Kai', country: 'Denmark' } ]; }); </script>

转载于:https://www.cnblogs.com/Lulus/p/7873907.html


最新回复(0)