简单的angular过滤器

最新推荐文章于 2022-06-15 17:26:27 发布

原创最新推荐文章于 2022-06-15 17:26:27 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实例展示了AngularJS中几种内置过滤器的应用，包括货币格式化、文本转大写、限制显示长度及数组过滤等，同时介绍了如何使用日期过滤器格式化日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//第一步还是导包

<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="qian" />
<div>{{qian}}<br />
  货币:{{qian|currency:"￥"}}；<br />
  大小写:{{qian|uppercase}}<br />
  
  只展示9位数:{{qian|limitTo:9}}
</div><br />
<div>
  <br>
  查找数组datas里带有3的数<br />
  {{datas|filter:"3"}}<br />
  查找数组datas2里面带有20的<br />
  {{datas2|filter:"20"}}

</div><br />
<input type="text" ng-model="riqi" />
<div>
  将输入框里面是数据变为日期展示:<br />
  {{riqi|date:"yyyy年MM月dd日     hh-mm-ss"}}
</div>

<script>
  var mo = angular.module("myApp",[]);
  mo.controller("myCtrl",function($scope){
   $scope.datas = [1,2,3,4,1,32,45];

    $scope.datas2= [
    {"name":"张三","age":20},
    {"name":"张三1","age":22},
    {"name":"李四","age":20}
    ]

  })
</script>
</body>