您现在的位置是:首页 > web开发 > angularjs1-过滤器

angularjs1-过滤器

web开发作者:dayu日期:11天前点击:6
<br><br> {{ 1.234567 | number:1 }} <br><br> {{ 250 | currency:"RMB ¥ " }} <br><br> {{ "i love tank" | limitTo:6 }} <br><br> {{ "i love tank" | limitTo:-6 }} <br><br> {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:‘id‘:true }} <br><br> {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:‘id‘ }} </div> <div ng-controller="secondController"> <ul> <li ng-repeat="p in person"> 姓名:{{p.name}} 年龄:{{p.age}} </li> </ul> <p>循环对象:</p> <ul> <li ng-repeat="x in names | orderBy:‘country‘:true"> {{ x.name + ‘, ‘ + x.country }} </li> </ul> <p>输入过滤: </p> <p><input type="text" ng-model="name"></p> <ul> <li ng-repeat="x in names | filter:name | orderBy:‘country‘"> {{ (x.name | uppercase) + ‘, ‘ + x.country }} </li> </ul> <p>name筛选:</p> <ul> <li ng-repeat="x in names | filter:{‘name‘:name} | orderBy:‘country‘"> {{ (x.name | uppercase) + ‘, ‘ + x.country }} </li> </ul> {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{‘name‘:‘sunm‘} }} </div> </div> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller(firstController,function($scope,$filter){ $scope.firstName="zhangsan"; $scope.lastName="李四"; $scope.price="12121212"; $scope.str=HelloWord; $scope.json={foo: "bar", baz: 23}; $scope.uFirstName=$filter(uppercase)($scope.firstName); // $scope.cprice= $filter(‘currency‘)($scope.price); $scope.cprice= $filter(currency)($scope.price,RMB ); console.log($scope.uFirstName); console.log($scope.cprice); }); app.controller(secondController,function($scope){ $scope.person=[ {name:张三,age:25}, {name:李四,age:30}, {name:王五,age:36} ]; $scope.names = [ {name:Jani,country:Norway}, {name:Hege,country:Sweden}, {name:Kai,country:Denmark} ]; }); </script> </body> </html>
<!DOCTYPE html>
<html>
<body>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="angular.min.js"></script>
    <script src="filter.js"></script>  //引入文件
    <!-- filter.js
var appFilter=angular.module("myApp.filter",[]);
appFilter.filter(‘rJs‘,function(){
    return function(input,n1,n2){
        console.log(input);
        console.log(n1);
        console.log(n2);
        return input.replace(/js/, "javascript");
    }
}); -->
</header>
<div ng-app="myApp">
        <div ng-controller="firstController">
            {{name | rHello}}
            <br>
            {{name | rHello:3:5}}
            <br>
            {{name | rJs}}
        </div>
</div>
<script type="text/javascript">
  var app=angular.module("myApp",[myApp.filter]); //依赖
  app.controller(firstController,function($scope){
        $scope.name="Hello Angularjs";
  });
  app.filter(rHello,function(){
      return function(input,n1,n2){
            console.log(input);
            console.log(n1);
            console.log(n2);
            return input.replace(/Hello/, "你好");
      }
  });
</script>
</body>
</html>

angularjs1-过滤器

原文地址:http://www.cnblogs.com/yaowen/p/7225697.html


下一篇       上一篇