AngularJs 内置指令

ng-repeat指令可以通过$index返回当前引用的元素序号;还可以通过$first 、$middle及$last,ng-repeat 指令返回布尔值,告诉你当前元素是否是集合中的第一个元素、中间的某个元素,或者最后一个元素

Java代码  

  1. <!doctype html>  
  2. <html ng-app>  
  3. <head>  
  4.     <script src="lib/angular/angular.min.js"></script>  
  5.     <script>  
  6.         function TestCtrl($scope) {  
  7.             $scope.items = [  
  8.                 { id: 0, name: "Red"},  
  9.                 { id: 1, name: "Red"},  
  10.                 { id: 2, name: "Red"},  
  11.                 { id: 3, name: "Red"},  
  12.                 { id: 4, name: "Yellow"},  
  13.                 { id: 5, name: "Orange"}  
  14.             ];  
  15.         }  
  16.     </script>  
  17. </head>  
  18. <body ng-controller="TestCtrl">  
  19. <ul ng-repeat="a in items" ng-if="a.name!=items[$index-1].name">  
  20.     {{ a.name }}  
  21. </ul>  
  22. </body>  
  23. </html>  

checkbox list

Java代码  

  1. <tr data-ng-repeat="list in lists">  
  2.     <td>  
  3.         <input type="checkbox" data-ng-model="list.isChecked" />  
  4.     </td>  
  5.     <td>{{list.itemSno}}</td>  
  6. </tr>  
  7. var arr = [];  
  8. ng.forEach($scope.lists, function(list) {  
  9.   if (list.isChecked) {  
  10.     arr.push(list.itemSno);  
  11.   }  
  12. });  

ng-show="一个判断条件:当其值为true时,显示"

 

ng-disabled="一种状态:该状态下不可用"

ng-readonly

 

Java代码  

  1. function Ctr($scope) {   
  2.     $scope.isActive = true;  
  3. }  

 <div ng-class="{true: 'active', false: 'inactive'}[isActive]">

isActive表达式为true,则 active,否则inactive。
<div ng-class="{'selected': isSelected, 'car': isCar}"></div>
当isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。

 

修改时有hidden控件,新增时没有控件

<input type="hidden" class="form-control"  ng-if="message.pk" data-ng-model="message.pk"/>

 

src href和属性注意事项
当数据绑定给一个<img>或者<a>标签时, 像上面一样在src或者href属性中使用 {{ }}处理路径将无法正常工作. 因为在浏览器中图片与其他内容是并行加载的, 所以Angular 无法拦截数据绑定的请求.

Java代码  

  1. <img ng-src="/images/cats/{{favoriteCat}}">  
  2. <a ng-href="/shop/category={{numberOfBalloons}}">some text</a>  

 asdf

时间: 2024-10-31 00:28:42

AngularJs 内置指令的相关文章

高效利用Angular中内置服务$http、$location等_AngularJS

AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结.1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUr

AngularJS的内置过滤器详解

  在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户.在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter. 今天我们来了解一下AngularJS的内置过滤器 先来看看这些内置过滤器使用方法: 一个过滤器,不带参数的情况 {{expression | filter}} 一个过滤器,带参数的情况 {{expression | filter:arguments

前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象,这意味着只有一个实例被创建过,服务使用AngularJS的依赖注入机制来定义和注册. 可以把服务注入模块.控制器和其它服务. 1.1.内置服务 常见的内置服务如下: $http 发送http请求 $resource 创建一个可以RESTful服务器端数据源交互对象 $window 浏览器的windo

C++ 内置宏定义 与 预编译指令

内置宏和预编译指令, 在代码调试.单元测试.跨平台代码中经常会用到.这里记录一下. 1. 内置宏 (文件名,当前行号,当前日期,当前时间,当前执行方法名) __FILE____LINE____DATE____TIME__ __FUNCTION__ 2.预编译指令 可以防止头文件被多次引用 可以方便解决代码跨平台编译问题 可以根据自定义变量灵活执行程序 等等,许多好处   效果可以看代码实例: test.h 1 #ifndef __TEST_H 2 #define __TEST_H 3 4 #in

实例详解JSP内置对象

js|对象|内置对象|详解 jsp九种内置对象:request, reponse, out, session, application, config, pagecontext, page, exception. 一.request对象:该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以获取用户提交信息. 1.Request对象可以使用getParameter(string s)方法获取该表单通过text提交的信息.如: Request.getParamet

ASP内置对象ObjectContext详解

object|对象|内置对象|详解     您可以使用 ObjectContext 对象提交或放弃一项由 Microsoft Transaction Server (MTS) 管理的事务,它由 ASP 页包含的脚本初始化.      ASP 包含 @TRANSACTION 指令时,该页会在事务中运行,直到事务成功或失败后才会终止.      语法   ObjectContext.method      方法   SetComplete SetComplete 方法声明脚本不了解事务未完成的原因.

JSP内置对象简要概述

js|对象|内置对象 (1) HttpServletRequest类的Request对象作用:代表请求对象,主要用于接受客户端通过HTTP协议连接传输到服务器端的数据.(2) HttpServletResponse类的Respone对象作用:代表响应对象,主要用于向客户端发送数据(3) JspWriter类的out对象作用:主要用于向客户端输出数据;         Out的基类是JspWriter(4) HttpSession类的session对象作用:主要用于来分别保存每个用户信息,与请求关

利用 ASP.NET 的内置功能抵御 Web 攻击

asp.net|web|攻击 摘要: Dino 总结了最常见的 Web 攻击类型,并介绍了 Web 开发人员可以如何使用 ASP.NET 的内置功能来改进安全性. 一.ASP.NET 开发人员应当始终坚持的做法 如果您正在阅读本文,可能就不需要再向您灌输 Web 应用程序中的安全性愈来愈重要这一事实了.您需要的可能是一些有关如何在 ASP.NET 应用程序中实现安全性的实际建议.坏消息是,没有任何开发平台 - 包括 ASP.NET在内 - 能够保证一旦采用了该平台,您就能够编写百分百安全的代码.

jsp的内置对象有什么

 1.request对象 该对象封装了用户提交的信息,通过调用该对象的响应的方法可以获取用户提交的信息. 当request对象获取用户提交的汉字字符时,会产生乱码,由下面的方法可以解决: Sting s2 = new  String(s1.getBytes("iso8859-1"),"GB2312")进行转换. request常用的方法: 1.request.getParameter("name"); 获取表单提交的信息 2.request.ge