• angular-过滤器


    过滤器 描述
    currency 格式化数字为货币格式。
    filter 从数组项中选择一个子集。
    lowercase 格式化字符串为小写。
    orderBy 根据某个表达式排列数组。
    uppercase 格式化字符串为大写。
    内容中:数值转为货币格式
    <p>总价 = {{ (quantity * price) | currency }}</p>
    
    排序
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
    
    内容中:转小写
    <p>姓名为 {{ lastName | lowercase }}</p>
    
    内容中:转大小写
    <body ng-app="myApp">
    		<div ng-controller="myCtrl">
    			<input type="text" ng-model="name"/>
    			<input type="text" ng-model="age"/>
    			<!--z转换为大/小写-->
    			<!--<p>调用控制器里的函数:{{info()|uppercase}}</p>-->
    			<p>调用控制器里的函数:{{info()|lowercase}}</p>
    		</div>
    		<script type="text/javascript">
    			var app=angular.module('myApp',[]);
    			app.controller("myCtrl",function($scope){
    				$scope.name="Youyuanyuan";
    				$scope.age=10;
    				$scope.info=function(){
    					//注意变量前加上$scope
    					return $scope.name+" "+$scope.age;
    				}
    			})
    			
    		</script>
    	</body>
    
    排序:在ng-repeat之后
    • {{x}}
    • {{x.name+" "+x.age}}
    <body ng-app="myApp">
    		<div ng-controller="myCtrl">
    			<input type="text" ng-model="name" />
    			<input type="text" ng-model="num" />
    			<p>{{"名称:"+name+",单价:"+price+",数量:"+num}}</p>
    			<p>总价:{{ (price * num) | currency }}</p>
    		</div>
    		
    		<ul ng-controller="myCtrl">
    			<!--数组排序-->
    			<li ng-repeat="x in sum|orderBy">{{x}}</li>
    		</ul>
    		<ul ng-controller="myCtrl">
    			<!--对象排序-->
    			<li ng-repeat="x in info|orderBy:'age'">{{x.name+" "+x.age}}</li>
    		</ul>
    		<script type="text/javascript">
    			var app = angular.module('myApp', []);
    			app.controller("myCtrl", function($scope) {
    				$scope.name = "apple";
    				$scope.num = 10;
    				$scope.price = 20;
    				$scope.sum =[10,30,20];
    				$scope.info=[{name:"youyunayuan",age:20},
    							{name:"youqijia",age:30},
    							{name:"youlonglong",age:10},
    							{name:"zhengshaonong",age:5}];
    			})
    		</script>
    	</body>
    
  • 相关阅读:
    libcurl库进行http通讯-开篇
    hdu4059The Boss on Mars 容斥原理
    “最大子序列和”算法 java
    Android 的事件传递机制,详解
    POJ
    hdu 5652 India and China Origins
    解决Swap file &quot;.ceshi.c.swp&quot; already exists!问题
    3DMax脚本插件--改动材质&amp;贴图名称
    ASP.NET MVC+Bootstrap 实现短信验证
    [从头学数学] 第176节 概率
  • 原文地址:https://www.cnblogs.com/sakura-sakura/p/6678836.html
Copyright © 2020-2023  润新知