码迷,mamicode.com
首页 > Web开发 > 详细

angularjs1-过滤器

时间:2017-07-23 20:59:25      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:style   utf-8   对象   set   return   count   var   scope   div   

<!DOCTYPE html>
<html>
<body>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="angular.min.js"></script>
</header>
<div ng-app="myApp">
        <div ng-controller="firstController">
            <p>在输入框中尝试输入:</p>
        <p>姓名:<input type="text" ng-model="firstName"></p>
        {{firstName | uppercase }}
        {{lastName}}
        {{price | currency}}
            <br><br>     <br><br>
       {{json | json }}
            <br><br>
            <br>
      {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
            <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-过滤器

标签:style   utf-8   对象   set   return   count   var   scope   div   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!