1.templateUrl:'abc',

用这种方法时：

<script type="text/ng-template" id="abc">
　　　　<div>
　　　　　　<h1>标题</h1>
　　　　　　<p>放置内容的</p>
　　　　</div>
</script>

2.用scope这种时

scope:{
　　myStr:'@',//传递一个字符串作为属性的值
　　myAttr:'=',//绑定父作用域中的一个属性,在指令中调用
　　myFun:'&'//绑定父作用域中的一个函数,在指令中调用
},

<div my-tag my-str="lilei" my-attr="txt" my-fun="abc()"></div>

app.directive('myTag',function (){
　　return {
　　　　restrict:'AC',
　　　　replace:false,
　　　　　　　scope:{
　　　　　　　　　　myStr:'@',//传递一个字符串作为属性的值
　　　　　　　　　　myAttr:'=',//绑定父作用域中的一个属性,在指令中调用
　　　　　　　　　　myFun:'&'//绑定父作用域中的一个函数,在指令中调用
},

template:'<div><h3>我名字叫:{{myStr}}</h3><h3>{{myAttr}}</h3><button ng-click="def()">点击我</button></div>'
}
});

3.link

link:function (scope,element,attr,controller){//指令逻辑代码区域
　　　　element.on('click','button',function (){
　　　　　　element.find('span').css('color','red');
　　　　});
},
template:'<div><h3>我名字叫:{{myStr}}</h3><h3>{{myAttr}}</h3><button>点击我</button><span>被控制元素</span></div>'
}

4.过滤器

<div ng-controller="myCtrl">
　　<h1>{{name | uppercase}}</h1>
　　<h1>{{name | lowercase}}</h1>
　　<h1>苹果7价格是：{{jg | currency:'￥'}}</h1>
</div>

5.filter

<body ng-app="myApp">
　　<div ng-controller="myCtrl">
　　　　<input type="text" value="" ng-model="str">
　　　　<ul>
　　　　　　<li ng-repeat="per in data | filter:str">
　　　　　　　　　　<span>姓名：{{per.name}}</span>
　　　　　　　　　　<span>性别：{{per.sex}}</span>
　　　　　　　　　　<span>年龄：{{per.age}}</span>
　　　　　　</li>
　　　　</ul>
</div>
<script>
　　var app=angular.module('myApp',[]);
　　app.controller('myCtrl',function ($scope){
　　　　　　$scope.str='';
　　　　　　$scope.data=[
                        {'name':'lilei','sex':'男','age':24},
                        {'name':'lily','sex':'女','age':22},
                        {'name':'lucy','sex':'女','age':28},
                        {'name':'jack','sex':'男','age':21},
                        {'name':'lilei','sex':'男','age':20},
                        {'name':'lily','sex':'女','age':31},
                        {'name':'lucy','sex':'女','age':35},
                        {'name':'jack','sex':'男','age':18}
             ];
})
</script>
</body>

6.自定义filter

<body ng-app="myApp">

　　<div class="box" ng-controller="myctrl">
　　　　<div class="head">
　　　　　　<span>编号</span>
　　　　　　<span>姓名</span>
　　　　　　<span>性别</span>
　　　　　　<span>年龄</span>
　　　　</div>
　　　　<ul class="list">
　　　　　　<li ng-repeat="x in data | myfilter:0" ng-class-odd="'odd'" ng-class-　　even="'even'">
　　　　　　　　<span>{{$index+1}}</span>
　　　　　　　　<span>{{x.name}}</span>
　　　　　　　　<span>{{x.sex}}</span>
　　　　　　　　<span>{{x.age}}</span>
　　　　　　</li>
　　　　</ul>
</div>

<script>
var app=angular.module('myApp',[]);
app.controller('myctrl',['$scope',function (scope){
　　scope.data=[
　　　　{'name':'刘一','sex':'男','age':21},
　　　　{'name':'杨二','sex':'女','age':20},
　　　　{'name':'张三','sex':'女','age':15},
　　　　{'name':'李四','sex':'男','age':23},
　　　　{'name':'王五','sex':'女','age':22},
　　　　{'name':'马六','sex':'男','age':25},
　　　　{'name':'全七','sex':'女','age':26},
　　　　{'name':'艾八','sex':'男','age':30},
　　　　{'name':'赵九','sex':'女','age':31},
　　　　{'name':'顾十','sex':'女','age':19},
　　　　{'name':'萧11','sex':'女','age':22}
　　];
}]);
app.filter('myfilter',function (){
　　　　//arr为调用过滤器时自动注入的数据data，
　　　　//sex为调用过滤器时传过来的参数0(myfilter:0)
　　　　return function (arr,sex){
　　　　　　var _arr=[];
　　　　　　var _sex=sex?'男':'女';
　　　　　　for (var i = 0; i < arr.length; i++) {
　　　　　　　　if (arr[i].sex==_sex&&arr[i].age>18&&arr[i].age<30) {
　　　　　　　　_arr.push(arr[i]);
　　　　　　　　};
　　　　　　};
　　　　return _arr;
　　}
});
</script>
</body>

转载于:https://www.cnblogs.com/SunShineM/p/6020765.html

angular具体用法及代码相关推荐

  1. Python - while语句和if语句 的 用法 及 代码

    while语句和if语句 的 用法 及 代码 本文地址 : http://blog.csdn.net/caroline_wendy/article/details/17199771 Python中wh ...

  2. input type=range标签用法实例代码

    在HTML5中,又新增许多新<input>控件类型,比较实用的一个就是<input type="range">,以滑竿的方式来调整value值,在这以前需要 ...

  3. C++中 Map的了解与基本用法（代码演示+自我总结+map中一对多的用法）

    C++中 map的了解与基本用法(代码演示) 一:map的基本认识 Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值) ...

  4. 测试Rockey4Smart加密锁之模块字和三算法的用法C#代码

    测试Rockey4Smart加密锁之模块字和三算法的用法C#代码 private void btn_LookZzghjk_Click(object sender, EventArgs e) { if ...

  5. html渐变线条代码,CSS3实现线性渐变用法示例代码详解

    前言 演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...

  6. python numpy allclose用法及代码示例

    python numpy allclose用法及代码示例 用法: numpy.allclose(a, b, rtol=1e-05, atol=1e-08, equal_nan=False) 如果两个数 ...

  7. PostgreSQL REGEXP_REPLACE用法及代码示例

    PostgreSQL REGEXP_REPLACE用法及代码示例: 原文链接:https://vimsky.com/examples/usage/postgresql-regexp_replace-f ...

  8. choose when 改在java中_Mybatis choose when用法实例代码

    mybatis choose when的用法实现代码如下所示: mapper.xml: select a.city_id as CITYID, a.level1_maintain_unit_id as ...

  9. merge函数_C++ - 标准库 merge 函数 的 用法及代码

    标准库 "merge" 函数 的 用法及代码 merge() 是 C++ 标准库的函数, 主要实现函数的排序和合并, 不仅仅是合并, 具体要求参照标准库. 如果是通用方法, 则第二 ...

最新文章

  1. Altium Designer -- PCB布线面试题（转）
  2. 通过Xshell登录远程服务器实时查看log日志
  3. reactrouter4路由钩子_react router @4 和 vue路由 详解(八)vue路由守卫
  4. ASP.NET MVC如何使用Ajax的辅助方法
  5. python定时任务之cron_Python定时任务框架APScheduler 3.0.3 Cron示例
  6. [Flex] Flex 控件类 的自定义事件添加
  7. TimingExecutor —— 定时执行、定时任务管理软件，定时执行专家
  8. 华为p4用鸿蒙系统吗_为什么华为有自主研发的鸿蒙系统，却还要用安卓系统，背后的真实原因？...
  9. 使用js在线将pdf转为图片
  10. 二维码防伪系统开发-实现了产品信息防伪的高效性
  11. 小米随身wif linux平台配置
  12. 使用苹果的地图与定位
  13. springboot + Vue 整合阿里云视频点播 | Spring Boot 20
  14. vpb输出范围地形命令
  15. ​未名企鹅极客 | 流向处理新技术
  16. css3边框线border
  17. 尚学堂Java培训：如何寻找好书？
  18. python 单位根检验代码_Python ADF 单位根检验 如何查看结果的实现
  19. 虚幻引擎(18)-局域网联机详细教程
  20. 毕业3年，我从鉴黄师转行到阿里做测试

热门文章

  1. 深度强化学习（Deep Reinforcement Learning）的资源
  2. ML 02、监督学习
  3. 手写webpack系列一：了解认识loader-utils
  4. [翻译][1.4.2]Flask-Admin入门介绍
  5. disruptor实现细节及源码分析
  6. Linux IPC实践(8) --共享内存/内存映射
  7. Codevs2822 爱在心中
  8. 【Codeforces #167 Div1 Div2】Solutions
  9. 第29节 专业英语1
  10. 亚洲杯：打平韩国即可小组第一 国足会继续带来惊喜吗？