AngularJs练习Demo7
Posted 编程猴子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs练习Demo7相关的知识，希望对你有一定的参考价值。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>过滤器和自定义过滤器</title>
<script type="text/javascript" src="~/Scripts/angular.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName" /></p>
{{firstName | uppercase}}<br />
{{lastName}}<br />
{{price | currency}}<br />
{{json | json}} @*JSON格式化的过滤器*@<br />
{{1304375948024 | date:"yyyy-MM-dd hh:mm:ss"}} @*date 日期过滤器可以给日期格式化**@<br />
{{123456|number:1}} @*数字过滤器 保留1位小数*@ <br />
{{250 | currency:‘RMB ￥‘}}<br />
{{"i love tank"| limitTo:6}} <br /> @* 截取六个字符串 *@
{{"i love tank"| limitTo:-6}} <br /> @* 从后向前截取字符串 *@
<p>
控制器使用过滤器
uFirstName: {{uFirstName}}<br />
cPrice: {{cPrice}}<br />
</p>
</div>
<div ng-controller="secondController">
<p>
循环对象：
<ul>
<li ng-repeat="x in names | orderBy:‘country‘：true">
@*true表示降序排序*@
{{x.name+","+x.country}}
</li>
</ul>
</p>
<p>
输入过滤：
</p>
<p><input type="text" ng-model="name" /></p>
<p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:‘country‘">
{{x.name+","+x.country}}
</li>
</ul>
</p>
<ul>
<li ng-repeat="p in person">
姓名：{{p.name}}
年龄：{{p.age}}
</li>
</ul>
</div>
{{
[{"age":20,"id":10,"name":"iphone"},
{"age":12,"id":11,"name":"sunm xing"},
{"age":44,"id":12,"name":"test abc"}
]| filter:{"name":"iphone"}
}}
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("firstController", function ($scope, $filter) {
$scope.firstName = "zhangsan";
$scope.lastName = "李四";
$scope.price = "121212";
$scope.str = "HelloWorld";
$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‘); //格式化参数可以写在后面
});
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>
以上是关于AngularJs练习Demo7的主要内容，如果未能解决你的问题，请参考以下文章
流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)
从 AngularJS url 中删除片段标识符（# 符号）