angular.js学习（2）--filter

最新推荐文章于 2022-01-14 17:01:08 发布
最新推荐文章于 2022-01-14 17:01:08 发布
阅读量462 收藏
点赞数
分类专栏： angular.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012841667/article/details/52740309
版权



结果：

Oct 5, 2016
2016-10-05 08:12:37
10/05/2016 @8:12:37PM
我是莉莉111  

filter.js

<pre name="code" class="javascript">var app = angular.module("app",[])
.filter("myfilter",function(){
<span style="white-space:pre">	</span>return function(item){
<span style="white-space:pre">		</span>return item+'111';
<span style="white-space:pre">	</span>}
})
 filter.html 

 

 

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta charset="utf-8">
	<title>filter</title>
	<script src="../angular-1.5.8/angular.js"></script>
	<script type="text/javascript" src="filter.js"></script>
</head>
<body>
{{1475669557000 |date}}
<br/>
{{1475669557000 |date:"yyyy-MM-dd hh:mm:ss"}}
<br/>
{{1475669557000 |date:"MM/dd/yyyy @h:mm:ssa"}}
 

<br/>
 

{{"我是莉莉" | myfilter}}
</body>
</html>
 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  qq小小布丁
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Angular.js学习--Day01

				
			

			

				

					sinat_27801935的博客
				

				

					06-02
					
					521
					
				

			

		

		

			
				
前端框架繁多，更新迭代快，学无止境，不学就要被淘汰了~ 
  断断续续看过好几次angular的教程，工作中一直也没用，所以每次都是看了忘，忘了看，一问又不会，再接着看…尴尬 - -#  。
  
  不过，正所谓书读百遍其义自见，看了总比没看强。
都说Angular是标准的前端MVC框架，适合做单页面应用。M：Module   - - - -   Data数据啊~ 
V ：View

			
		

	



                

              
                



	

		

			

				
					
Angular.js框架

				
			

			

				

					m0_59708269的博客
				

				

					06-01
					
					2672
					
				

			

		

		

			
				
前端框架

			
		

	



                


  
              

                


	

		

			

				
					
angular.js学习 ui-router     0.2.15

				
			

			

				

					avtcpm1927的博客
				

				

					11-09
					
					116
					
				

			

		

		

			
				
angular.js学习 ui-router     0.2.15

        
	
        
            

    1. ui-router 是以状态驱动的，一个状态等价于该应用内的一个ui部分。
2，使用实例如下，当一个状态被激活后，它所代表的模板html就会被插入到ui-view中。
　　

&lt...

			
		

	





	

		

			

				
					
angular.js 教程 --  实例讲解

				
			

			

				

					aidu0177的博客
				

				

					03-27
					
					300
					
				

			

		

		

			
				
angular.js
AngularJS[1]诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个Java...

			
		

	



		

			
		



	

		

			

				
					
angular.js学习笔记--概念总结

				
			

			

				

					weixin_34221036的博客
				

				

					11-13
					
					61
					
				

			

		

		

			
				
好久没更新了，现在开始学习学习angularjs，并且把学习到的一些知识总结记录一下，方便以后查找以及希望能给初学者一些帮助！（由于本人也是初学ng所以各位慎重理解！）
废话不多说，开始！
$rootScope 和$scope：

$rootScope是angular中最接近全局作用域的对象，是所有$scope对象的最上层！
$scope对象就是一个普通的js对象，我...

			
		

	





	

		

			

				
					
angular.js之 ui-router

				
			

			

				

					sfl123zqm的博客
				

				

					02-06
					
					553
					
				

			

		

		

			
				
angular路由 
       路由(route)，几乎是所有的mvc（vm）框架所应该的特性，是前端构建单页面应用必不可少的组成部分，那么，对于 angular 而言，它自然也有 内置 的路由模块：叫做 ngRoute 。不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！于是，一个基于 ngRoute 开发的 第三方路由模块 ，叫做 ui.router ，受到了大家的“追捧”。

			
		

	





	

		

			

				
					
angular做语言切换_angular.js 国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境...

				
			

			

				

					weixin_32842959的博客
				

				

					12-23
					
					758
					
				

			

		

		

			
				
文章目录文章目录很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验.angular.js 作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angular.js 官方出了一个模块 angular-translate 来解决多语言国际化问题.上面列出的3个模块我们都要用到,一会详细说明:今天和大家分享的内容目录:使用angular-translate...

			
		

	





	

		

			

				
					
Angular学习---filter过滤器（管道pipe）

				
			

			

				

					m0_61648855的博客
				

				

					01-14
					
					2676
					
				

			

		

		

			
				
angular核心概念 -----过滤器 Filter ---应用；如当后台传入数据用1,2 代表性别，可以用过滤器进行更改.如上 练习：创建员工信息列表 中 的员工性别

过滤器在angular2以后改名为 管道（pipe）,详见新建的sex.pipe.ts文件

创建管道对象的简便工具 ---- ng g pipe 管道名

扩展 -- angular 提供的 pipe 方法 --- （1）LowerCasePipe 把文本转换成全小写形式。 （2）UpperCasePipe 把文本转换成全大写形式 （

			
		

	





	

		

			

				
					
学习Angular.js之Class-1: 简介+初始化+概念概述

				
			

			

				

					DoNow
				

				

					02-28
					
					560
					
				

			

		

		

			
				
聊聊近态

现在AngularJS框架很火，很多前端招聘信息要求都需要掌握AngularJS，因为我学习喜欢做笔记，但是一般是写在印象笔记，但是投前端简历的时候，就需要填写个人博客或者github，所以以后学习就转战这两个平台进行记录吧~~~请大家多多关照

学习内容来源：AngularJS中文网 

笔记备注：

蓝色字体代表加了链接，绿色字体表示个人理解，红色字体表示待解决的疑问，紫色...

			
		

	





	

		

			

				
					
Ionic，angular.js学习--(本篇文章技术已过时，angular学习请参考angular2)

				
			

			

				

					qq1377399077的专栏
				

				

					08-01
					
					898
					
				

			

		

		

			
				
ionic学习

			
		

	





	

		

			

				
					
Angular.js回顾ng-app和ng-model使用技巧

				
			

			

				

					10-22
				

			

		

		

			
				
Angular.js是一个非常流行的JavaScript框架，主要用于开发动态的单页面应用程序。在Angular.js中，ng-app和ng-model是两个非常核心的指令（directives），它们分别用于启动Angular.js应用和数据绑定。  首先，让我们...

			
		

	





	

		

			

				
					
angular-percentage-filter:angular.js的百分比过滤器

				
			

			

				

					04-30
				

			

		

		

			
				
 script src =" /bower_components/angular-percentage-filter/percentage.js " > </ script >  将其导入角度应用程序：  angular . module ( 'myApp' , [ 'percentage' ] ) ;  在视图中使用它：  < span> ...

			
		

	





	

		

			

				
					
angular-ui-tree-filter:提供 AngularJS 过滤器的模块，可与 angular-ui-tree 一起使用以匹配树节点

				
			

			

				

					05-31
				

			

		

		

			
				
#ui.tree-过滤器   提供过滤器的模块，可与以匹配树... $filter('uiTreeFilter')(nodeObject, pattern, ['title', 'description', 'username']) 它匹配整个路径如果一个子节点也匹配它的所有祖先直到树根匹配：   Filte

			
		

	





	

		

			

				
					
angular.js学习（1）--directive指令独立scope

				
			

			

				

					u012841667的专栏
				

				

					10-05
					
					1030
					
				

			

		

		

			
				
1、@

	

var app = angular.module("app",[]);app.controller("love",["$scope",function($scope){
	$scope.fover="百事可乐";
}])
.directive("drink",function(){
	return{
		restrict:"AE",
		scope:{
			myfaver:'

			
		

	





	

		

			

				
					
angular.js学习（3）--injector注射器

				
			

			

				

					u012841667的专栏
				

				

					10-05
					
					918
					
				

			

		

		

			
				
为什么要依赖注入？声明式，推断型注入，内联式注入
var app = angular.module("app",[]);
var myCtrl  = function(thisname){
	thisname.name = "lili";
}
myCtrl.$inject = ['$scope'];
app.controller('myCtrl',myCtrl);
var app = angu

			
		

	





	

		

			

				
					
angular.js(3)--指令的执行过程

				
			

			

				

					u012841667的专栏
				

				

					10-07
					
					895
					
				

			

		

		

			
				
1、指令的执行分两个阶段，compile和link函数
自定义link
var app = angular.module("app",[]);
app.directive("hello",function(){
	return {
		restrict:"E",
		template:"hello everyone!",
		replace:true,
		link:function(scop

			
		

	





	

		

			

				
					
angular.js学习(1)--指令之间的交互--动感超人

				
			

			

				

					u012841667的专栏
				

				

					10-05
					
					642
					
				

			

		

		

			
				
strman、speman、litman都依赖于superman当定义可以让外部调用的函数时，放在directive中，内部自己的绑定的事件放在link中
//动感超人，四个指令superman.html


	
	superman
	
	
	


	
		
			超人--力量
		
	
	
		
			超人2--力量+敏捷
		
	
	
		
			超人3--力量+敏捷+发光

			
		

	





	

		

			

				
					
angular.js学习（1）--指令和控制器间的交互

				
			

			

				

					u012841667的专栏
				

				

					10-05
					
					564
					
				

			

		

		

			
				
1、
var app = angular.module("app",[]);
app.controller("repeatCtrl",['$scope',function($scope){
	$scope.loadDate = function(){
		console.log("加载数据中，，，");
	}
}]).controller("repeatCtrl2",['$scope',fun

			
		

	





	

		

			

				
					
angular.js学习（3）--启动过程

				
			

			

				

					u012841667的专栏
				

				

					10-05
					
					509
					
				

			

		

		

			
				
1、用自执行函数的形式让整个代码再加载完成后立即执行
2、检查是不是多次导入angular
3中启动方法：
第一种：var app=angular.module("app",[]);
app.controller("appCtrl",["$scope",function(){

}]);第二种：
angular.element(document).ready(function(){
	an

			
		

	





	

		

			

				
					
Angular.JS过滤器与自定义过滤器实战解析

				
			

			

				

					
				

			

		

		

			
				
“Angular.Js中过滤器filter与自定义过滤器filter实例详解”  在AngularJS框架中，过滤器（filter）是一种强大的工具，用于在视图层对数据进行转换和格式化，使得数据显示更加易读和符合用户需求。本文将深入讲解...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值