zoukankan      html  css  js  c++  java
  • angular的过滤器

    angular有一些自带的过滤器,今天我就来写一下。

    首先还是先把导入一个angular插件,再在我们的js中把模块和控制台写上(别忘了在html中写入模块名和在body中写入控制台名,当然控制台名可以视情况而定写在哪)

    因为我们老用数组,所以先写一下截取数组长度的;先在控制台中写一个数组,再在html中用angular的写法写入;

    截取数组长度

    $scope.arr = [1,2,3,4,5,6,7];  //js的控制台中创建数组

    {{arr | limitTo:数组长度}};

    排序

    $scope.brr = ['b', 'l', 'a', 'c', 'e', 'h'];//在js的控制台中创建数组

    {{brr | orderBy}};  //htmljs中控制台中的数组引出并排序;如果是英文就按字母排,汉字按首字母.数字就按大小;

    添加符号

    $scope.a = 50; //js的控制台中创建数值

    {{a | currency:"¥"}}  //如果有需要钱币符号或特殊符号我们可以这么写

    大写和小写

    $scope.str = "dawdaJKNKawdBBJw"; //js的控制台中写一个带有大写和小写字母的字符串

    {{str | uppercase}}  //大写

    {{str | lowercase}}  //小写

    千分位

    $scope.nub = 116516116;  //js控制台中写一个长的数值

    {{nub | number}}  //讲数值用千分位的方式分开

    时间的过滤器

    $scope.shijian = new Date().getTime();//js控制台中获取一下时间戳

    {{shijian | date:'yyyy-MM-dd hh:mm:ss EEEE'}} //yyyy年份 MM月份 dd日期 hh小时 mm分钟 ssEEEE星期但是是英文的

    搜索过滤器

    $scope.crr = [{name: '土豆',price: 5,nbm: 0},

          {name: '茄子',price: 6,nbm: 0},

           {name: '黄瓜',price: 8,nbm: 0}];//js控制台中创建一个数据来用来搜索

    <input type="text" ng-model="xx"/>

    <ul>

      <li ng-repeat="i in crr | filter:xx">{{i.name}}</li>

    </ul>

    html中先创建一个文本框来获取一下要搜索的数据,再将数据从数据中导出后在依照搜索的内容显示和隐藏

    如果你想自己来定义一个过滤器也是可以的

    我先写一个让首字符大写的

    $scope.str1='welcome to china';

    app.filter('变量名',function(){

      return function(input){

      return input.replace(/w+/g,function(s){

      return s.charAt(0).toUpperCase()+s.substring(1);

    })

    {{str1 | 变量名}}  //通过变量名来寻找到自己定义的过滤器

  • 相关阅读:
    BZOJ 3744 Gty的妹子序列
    BZOJ 3872 Ant colony
    BZOJ 1087 互不侵犯
    BZOJ 1070 修车
    BZOJ 2654 tree
    BZOJ 3243 向量内积
    1003 NOIP 模拟赛Day2 城市建设
    CF865D Buy Low Sell High
    CF444A DZY Loves Physics
    Luogu 4310 绝世好题
  • 原文地址:https://www.cnblogs.com/Z-Xin/p/7041719.html
Copyright © 2011-2022 走看看