angularjs1-过滤器
2024-09-04 06:23:30
<!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>
最新文章
- Android TextView自动换行文字排版参差不齐的原因
- Scala的Pattern Matching Anonymous Functions
- FileSystemWatcher使用方法具体解释
- 刚下载的几个开源的Android项目
- Mac软件记录
- 谈JS中的作用域链与原型链（1）
- 基于Struts2，Spring4，Hibernate4框架的系统架构设计与示例系统实现
- TextView设置不同字段不同点击事件
- .net 使用oracle 的存储过程有返回值也有数据集（游标）
- 前端的业余设计-about my 毕业季
- CVE-2010-2883
- Ascending Rating（单调队列）
- Oracle11g口令过期的解决
- 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法
- Web开发技术选型之Java与PHP
- C++ Primer Plus学习：第二章
- 框架----Django内置Admin
- cocos2d-x：将iOS项目编译成Andriod项目
- （转）理解POST和PUT的区别，顺便提下RESTful
- Redis搭建（三）：哨兵模式