angular过滤器

最新推荐文章于 2019-10-29 19:29:03 发布

瘦巴巴的老爷们

最新推荐文章于 2019-10-29 19:29:03 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/qq849410011/article/details/80128469

版权

ng-app="作用域名" 作用域
ng-controller="" 应用程序控制器
ng-init="" 初始化应用程序数据
ng-model="" 输入域的值
ng-bind="" 给定的变量或表达式的值来替换 HTML元素的内容
ng-click="" 点击事件
ng-show="" 设置应用中的一部分是否可见 ng-show="false" 可以设置 HTML 元素不可见。
ng-show="true" 可以以设置 HTML 元素可见
ng-hide="" 用于设置应用部分是否可见 ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见
ng-repeat="" 可以遍历数组/集合克隆一次 HTML 元素
$scope和$rootScope：
$scope:----作用在当前的控制器内
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上/

$rootScope:-----一个模块内
$rootScope所有的应用都有一个 $rootScope，作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
angular.module('作用域名',[]).controller('控制器名',function ($scope) {
$scope.Num3="大头";
})

uppercase：格式化字符串为大写
Lowercase：格式化字符串为小写
Currency：将数字格式化为货币格式
Date：对日期进行格式化
Filter：匹配字符串（可以用作模糊查询）
limitTo：限制数组或字符串长度
orderBy：可以对一个数组中的元素进行排序，接受一个参数来制定规则

ecma

<hr>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
angular.module("MyApp",[]).controller("myCtrl",function ($scope) {
//声明一个价格
$scope.price=20;
//声明字符串
$scope.str1 = "abcdefg";
$scope.str2 = "ABCDEFG";
$scope.str3 = "1234abcdABCD张三李四王五";
//声明数组
$scope.user = ["张三","李四","王五","赵六"];
//字符串数组
$scope.person = [{
name:"张三",
age:19,
count:70
},
{
name:"李四",
age:20,
count:80
},
{
name:"王五",
age:21,
count:90
},
{
name:"赵六",
age:22,
count:100
}];
})
</script>
</head>
<body ng-app="MyApp" ng-controller="myCtrl">

<fieldset>
<legend>货币过滤器---currency</legend>
<input type="text" ng-model="price" />
<div>价格为：{{price|currency:"$"}}</div>
</fieldset>

<fieldset id="">
<legend>转化大小写---uppercase/lowercase</legend>
<input type="text" ng-model="str1" />
<div>转化成大写:{{str1|uppercase}}</div>
<input type="text" ng-model="str2" />
<div>转化成大写:{{str2|lowercase}}</div>
</fieldset>

<fieldset id="">
<legend>日期格式化----date</legend>
<input type="date" ng-model="mydate" />
<div>格式化日期:{{mydate|date:"yyyy-MM-dd"}}</div>
</fieldset>

<fieldset id="">
<legend>字符串的截取----limitTo</legend>
<div id="">
按照前6位截取:{{s1|limitTo:13}}
</div>
<div id="">
按照后6位截取:{{s1|limitTo:-13}}
</div>
</fieldset>

<fieldset id="">
<legend>匹配过滤器---filter(过滤子集)</legend>
<input type="text" ng-model="data" /><br />

<hr />
<div ng-repeat="x in person|filter:{name:data}">
{{x.name+"--"+x.age+"--"+x.count}}

</div>
</fieldset>

<fieldset id="">
<legend>数字(保留小数点后几位)---number---四舍五入的</legend>
请输入一个小数:<input type="text" ng-model="num" />
<div id="">
{{num|number:2}}
</div>
</fieldset>

<fieldset id="">
<legend>排序过滤器----orderBy</legend>
<p ng-repeat="x in person|orderBy:'-age'">
{{x.name+"---"+x.age}}
</p>
<hr />
<p ng-repeat="s in person|orderBy:['age','count']">
{{s.name+"---"+s.age+"---"+s.count}}
</p>
</fieldset>

</body>
</html>

瘦巴巴的老爷们

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular过滤器

ng-app="作用域名" 作用域 ng-controller="" 应用程序控制器 ng-init="" 初始化应用程序数据 ng-model="" 输入域的值 ng-bind="" 给定的变量或表达式的值来替换 HTML元素的内容 ng-click="" 点击事件 ng-show="" 设置应用中的一部分是否可见 ng
复制链接

扫一扫