`
hudeyong926
  • 浏览: 2032717 次
  • 来自: 武汉
社区版块
存档分类
最新评论

AngularJs 内置指令

 
阅读更多

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

<!doctype html>
<html ng-app>
<head>
    <script src="lib/angular/angular.min.js"></script>
    <script>
        function TestCtrl($scope) {
            $scope.items = [
                { id: 0, name: "Red"},
                { id: 1, name: "Red"},
                { id: 2, name: "Red"},
                { id: 3, name: "Red"},
                { id: 4, name: "Yellow"},
                { id: 5, name: "Orange"}
            ];
        }
    </script>
</head>
<body ng-controller="TestCtrl">
<ul ng-repeat="a in items" ng-if="a.name!=items[$index-1].name">
    {{ a.name }}
</ul>
</body>
</html>

checkbox list

<tr data-ng-repeat="list in lists">
    <td>
        <input type="checkbox" data-ng-model="list.isChecked" />
    </td>
    <td>{{list.itemSno}}</td>
</tr>
var arr = [];
ng.forEach($scope.lists, function(list) {
  if (list.isChecked) {
    arr.push(list.itemSno);
  }
});

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

 

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

ng-readonly

 

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

 <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 无法拦截数据绑定的请求.

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

 asdf

 
 
分享到:
评论

相关推荐

    AngularJS内置指令

    AngularJS内置指令包括但不限于以下几种: 1. ng-app:这个指令用来定义AngularJS应用程序的根元素。ng-app指令会自动初始化一个AngularJS应用程序。它通常出现在html元素上,告诉AngularJS框架接管页面。 2. ng-...

    浅入angularjs指令

    关于angularjs指令的ppt 类容包括内置指令和自定义指令的相关讲解

    AngularJS实用开发技巧(推荐)

    ### 三、AngularJS内置指令的实战应用 1. **ng-class**:动态地根据表达式的值添加或移除CSS类。可以接受字符串、对象或数组,灵活控制元素的样式。例如,用于点赞或关注功能,根据用户状态显示不同图标。 2. **ng-...

    AngularJS封装指令方法详解

    AngularJS内置了依赖注入系统和指令系统,使得开发者可以以声明式的方式编写应用,极大地简化了动态应用的开发。 在AngularJS中,指令(Directive)是核心概念之一,它允许开发者创建可重用的HTML标记,并将其扩展...

    AngularJS 指令详细介绍

    AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始...

    AngularJS自定义指令详解(有分页插件代码)

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 通过 .directive() 函数来添加自定义的指令。 调用自定义指令时,需要在HTMl 元素上添加自定义指令名。 自定义指令命名规则:使用驼峰命名法来命名...

    Chapter-1:Ionic –由Angularjs提供支持

    第1章-Ionic –由AngularJS提供支持 关于本章 Ionic是使用最广泛的移动混合框架之一。... 什么是AngularJS内置指令和自定义指令? 什么是AngularJS服务,自定义服务如何工作? Ionic如何利用指令和

    Angularjs使用指令做表单校验的方法

    Angularjs 提供了内置指令来支持表单验证,而本篇文章则着重介绍如何使用Angularjs指令来实现表单校验。 首先,我们来看一下Angularjs中表单校验的基本概念。在Angularjs中,表单校验主要通过ngModel控制器的验证...

    详解AngularJS验证、过滤器、指令

    AngularJS内置了丰富的验证机制,主要是为了确保用户输入的数据符合预设的规则。在HTML表单中,可以通过添加特定的`ng-*`指令来实现数据验证。例如: - `ng-required`: 指定字段是否必须填写。 - `ng-minlength`: ...

    Angularjs的键盘事件的绑定

    **方法一:使用AngularJS内置指令** AngularJS提供了`ng-keypress`指令来监听键盘事件。在描述中给出的例子中,`&lt;button&gt;`元素使用了`ng-keypress`指令来绑定键盘事件。代码如下: ```html ()" ng-keypress=...

    Mastering angularJS Directives

    AngularJS内置了许多指令,如`ngModel`、`ngRepeat`等,同时允许开发者自定义指令,这极大地扩展了框架的功能性和灵活性。 #### 开发生产级指令的关键要素 1. **隔离作用域**:在开发复杂应用时,使用隔离作用域...

    nb-stopwatch:AngularJS 秒表指令

    在AngularJS这个强大的前端开发框架中,`nb-stopwatch`是一个自定义的指令,用于实现秒表功能。本文将深入探讨这个指令的核心概念、工作原理以及如何在项目中使用它。 ## 一、AngularJS 指令简介 AngularJS 的指令...

    AngularJS视频part3.rar

    2. "24 directive-系统指令2.mp4":可能会继续深入讲解更多的内置指令,如ngModel,它是数据绑定的核心,将视图与模型关联起来;ngDisabled和ngChecked用于控制表单元素的状态;还有ngClick、ngSubmit等事件处理指令...

    angularJs权威和精通angularjs

    AngularJS提供了内置的测试工具,如ngMock,方便进行单元测试和端到端测试,确保代码质量。 **9. Forms和Validation:** AngularJS提供了强大的表单处理能力,包括模型绑定、验证和错误处理。ngForm和ngModel指令...

    angularJS技术

    常见的内置指令如`ng-repeat`用于数据循环,`ng-if`用于条件渲染,`ng-click`处理用户点击事件等。开发者可以通过自定义指令来扩展HTML的能力,创建出富有表现力的模板。 **5. 表单处理与验证** AngularJS提供了...

    angularjs-directives:其他 AngularJS 指令

    默认情况下,AngularJS 内置的指令优先级高于自定义指令。 五、指令隔离作用域 有时,为了防止指令污染全局作用域,我们可以创建一个隔离作用域。通过在配置对象中设置 `scope` 属性,可以创建一个独立的作用域,...

    AngularJs 1.5.8

    9. **动画**:AngularJS 1.5.8提供了内置的动画支持,可以方便地添加过渡和动画效果,增强用户体验。 10. **测试工具**:AngularJS 1.5.8提供了诸如ngMock、ngScenario等测试工具,使得单元测试和端到端测试更加...

Global site tag (gtag.js) - Google Analytics