1、ng-app:告诉Angular他应该管理页面的那一部分,可以放在html元素上也可以放在div等标签上
例:<html ng-app="problem">

2、ng-controller:控制器,通过在body标签上包含一个控制器,可以管理body标签之间的任何东西,也可以放在div上,来控制这一个div上的任何东西
例如:<body ng-controller="listController"> <div ng-controller="listController">

3、{{......}}:将变量的值插入到页面某部分和保持同步(表达式)

4、ng-repeat:数组中每个元素进行for循环
例:
<tr ng-repeat="info in problem.infos">
<td>
<div>
<p>{{info.ClientOrgName}}</p>
<p>({{info.ClientPerson}} {{info.ClientPhone}})</p>
</div>
</td>
<td>{{info.BusinessName}}</td>
<td>
<a href="" ng-click="problem.viewProblemDepict($index)">{{info.ProblemDepict}}</a>
</td>
<td>{{info.CreatePerson}}</td>
<td>
<div ng-if="info.State==3"></div>
<div ng-else>{{info.RealName}}</div>
</td>
<td>
<div ng-if="info.State==1">未解决</div>
<div ng-if="info.State==2">已解决</div>
<div ng-if="info.State==3">完成</div>
</td>
</tr>
<tr data-ng-if="problem.infos.length==0">
<td colspan='8'>
<div style="text-align: center;">没有符合条件的项</div>
</td>
</tr>

5、currency:过滤器,将美元形式格式化 例:currency : '¥' "

6、ng-model:指令把元素值(比如输入域的值)绑定到应用程序,创建输入字段的数据绑定,{{.......}}建立的是单向的联系。ng-model能与checkbox、input、radio等标准的元素正常的工作,如checkbox:SomeController中的$scope有一个youCheckedit的属性,选中为true没选中则为false

7、ng-init: 指令初始化应用程序数据 例:ng-init="firstName='John'"

8、ng-click:点击事件

9、ng-dbclick:双击事件

10、ng-bind:与{{......}}等价 例:ng-bind="goodInfo.goodsName"

11、ng-change:change事件

12、ng-submit自动的阻止浏览器发送默认的post动作

13、ng-src、ng-href与src、href等同

14、ng-option:在select用到,将option里的对象动态的生成

15、ng-href:与a标签中的href等同

16、ng-class:用来给元素绑定类名,其表达式的返回值可以是以下三种:

  类名字符串,可以用空格分割多个类名,如 ‘class1 class2’;
  类名数组,数组中的每一项都会层叠起来生效;
  一个名值对应的map,其键值为类名,值为boolean类型,当值为true时,该类会被加在元素上。

17、ng-class-odd、ng-class-even

  两个指令,用来配合 ng-repeat 分别在奇数列和偶数列使用对应的类,用在表格中实现隔行换色更方便

18、ng-style

  ng-style 用来绑定元素的 css 样式,其表达式的返回值为一个 js 对象,键为 css 样式名,值为该样式对应的合法取值。用法比较简单:
  例:

  $scope.style = {color:'red'}; 
  <div ng-style="{color:'red'}">ng-style测试</div>
  <div ng-style="style">ng-style测试</div>

AngularJs 常用指令标签的更多相关文章

  1. [AngularJS] 常用指令

    常用指令 ng-hide指令,用于控制部分HTML元素可见(ng-hide="false")和不可见状态(ng-hide="true"),如下: <div ...

  2. AngularJS常用指令

    一.指令 1.ng-app 定义应用程序的根元素 <div ng-app="app"></div> var app = angular.module('ap ...

  3. angular与angularjs常用指令的不同写法整理

    angularjs与angular 常用的指令写法的区别; 一:angularjs指令 1.ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容 <p ng-bind=&quo ...

  4. AngularJS常用指令用法详解

    ng-class 1>ng-init   ng-bind 11111 2>ng-class 111 3>ng-repeat 3.1-数据绑定     ng-repeat可以绑定数组和 ...

  5. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  6. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  7. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  8. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  9. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

随机推荐

  1. HTTP Status 500 - Unable to create directory

    分析原因: 例如:java web项目 上传图片创建文件夹cd /data/apps/static-web/sjk/driver/attachment/编号/文件名称.jpg 在创建文件目录 /dat ...

  2. ImageView setImageURI图片不改变\NetWorkImageView 不显示的问题

    ImageView 问题描述:图片文件已改变,第二次调用ImageView.setImageURI时无法更新图片 分析:setImageURI方法中对uri进行了缓存,由于第一次加载过了该uri的资源 ...

  3. Asp.Net WebApi swagger使用教程

    swagger简介 别名:丝袜哥 功能:用于生产api文档 swagger安装 Nuget搜索swagger,然后安装Swashbuckle swagger使用 生成api的xml文档 webapi项 ...

  4. 关于枚举,enum、Enum、EnumSet、RegularEnumSet、JumboEnumSet

    Apache Commons Lang. 在版本3中,enum相关的工具就留下EnumUtils. 首先, 所有enum,都默认实现了抽象类 java.lang.Enum .所以,所有enum都具备E ...

  5. 将本地代码上传github

    建立本地仓库 1.首先进入text文件夹 cd d:text 首先进入text文件夹 2.执行指令:git init 执行git init 初始化成功后你会发现项目里多了一个隐藏文件夹.git 隐藏的 ...

  6. vue跨域代理配置

    实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...

  7. Xcode连接TFS Git用户名和密码不正确解决方案

    团队要将原来搭建的Git服务全部迁移到TFS的Git上统一管理,迁移的过程非常顺利.当要用Xcode或者SourceTree连接TFS Git(我们的TFS身份认证是基于Windows的,使用HTTP ...

  8. 终于等到你,最强 IDE Visual Studio 2017 正式版发布

    Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...

  9. springCloud学习之服务注册和发现

    leader让完一个简单的springcloud的demo,自己之前听说过springcloud微服务,但是没有重视.现在网上查各种资料,但是感觉不怎么样啊,还是不会,明天晚上把代码给他看,天啦,这个 ...

  10. 10.5Djang admin 管理工具

    2018-10-5 17:30:57 Django admin 管理工具  参考连接: https://www.cnblogs.com/yuanchenqi/articles/8323452.html ...