`

Augular JS里的各种ng-

阅读更多
正文:
1.ng-disabled="一种状态:该状态下不可用"例如:
%button.btn.btn-2(ng-disabled="!activity_name")创建 //"activity_name"是一个可判断的值,当其值为true时,按钮可正常显示;flase时,按钮为灰色不可点

2.ng-tap="一个函数:点击时触发"
%button.btn.btn-2( ng-tap="create_activity()")创建 //当点击创建时会调用create_activity()函数,需要在Controller.js中定义其function

3.ng-change="一个函数:有改变时触发"  
%input(type="text" ng-change="activity_name" )//相当于watch的作用

4.ng-blind="字符串"
%p(ng-blind="greeting")  //greeting是一个字符串,可在Controller.js中定义

5.ng-model="取一个名字"
%input(type="text" ng-model="activity_name" ) //给input来一个绑定

6.ng-repeat="元素 in 数组"
%li(ng-repeat="name in names")
  {{name}}  //names是一个数组,ng-repeat对于数组中的每一项都创建一次一组元素的一份副本

7.ng-show(hide)="一个判断条件:当其值为true(false)时,按钮显示"
%button("ng-show="judge")返回 //其中judge是一个判断,可以使用函数返回值,或者直接传递一个值

8.ng-switch="一个判断值"
.header-right( ng-switch="apply_status" )
    %button.btn-4(ng-switch-default)开始
    %button.btn-4(ng-switch-when="2")开始
    %button.btn-4(ng-switch-when="1")结束 //与switch相近

参考:
Augular JS官方介绍:http://docs.angularjs.org/api/ng
分享到:
评论

相关推荐

    Angular-ng-admin-demo.zip

    Angular-ng-admin-demo.zip,ng admin angular.js演示的源代码,使用由fakerestarchiverepository提供支持的虚拟rest服务,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖...

    ng-book2,媲美官方的angular2实用教程--教程配套代码

    《ng-book2》是针对Angular2的一本权威教程,它以深入浅出的方式讲解了这个强大的前端框架。这本书的配套代码库提供了丰富的示例和练习,帮助读者更好地理解和应用所学知识。Angular2,作为Google推出的下一代...

    Angular ng-animate和ng-cookies用法详解

    总结来说,`ng-animate`提供了丰富的动画支持,使得开发者可以轻松地在Angular应用中添加各种动态效果。而`ng-cookies`则负责管理cookies,帮助在客户端持久化数据。这两个组件都是Angular生态中不可或缺的部分,极...

    angular模板加载——ng-template

    在Angular框架中,`ng-template`是一个非常关键的组件,用于定义可重用的模板。这些模板可以在运行时动态地插入到DOM(文档对象模型)中,为应用程序提供丰富的动态内容展示能力。本文将深入探讨`ng-template`的使用...

    angular-devkit-build-ng-packagr-builds:为@ angular-devkitbuild-ng-packagr构建工件

    @ angular-devkit / build-ng-packagr的快照构建 该存储库是原始存储库上的提交的快照。 用于生成此代码的原始代码位于 。 我们不接受在此存储库中打开的PR或问题。 您不应在此程序包的经过测试和发布的版本上使用...

    angular4教程-ng-book2 含中文翻译

    《Angular4教程-ng-book2 含中文翻译》是针对Angular框架第四版的全面学习资源,旨在帮助开发者深入理解和掌握这一强大的前端开发工具。本教程基于AngularJS 2(现称为Angular)的最新版本,提供了丰富的知识和实践...

    Ant Design 的 Angular 4.0 实现 NG-ZORRO.zip

    在Angular的世界里,NG-ZORRO扮演着重要的角色,它不仅提供了美观、易用的组件,还遵循了Angular的最佳实践,使得开发者能够快速构建出专业的企业级应用。这个库的出现,极大地简化了前端开发工作,尤其是在需要大量...

    angular2-tour-of-heroes-master

    **Angular2之旅:英雄指南** Angular2是Google推出的一个强大的前端框架,用于构建单页应用程序(SPA)。"Tour of Heroes"是Angular2官方提供的一系列教程,旨在帮助开发者快速掌握Angular2的基础知识和核心概念。...

    Angular.js中用ng-repeat-start实现自定义显示

    在Angular.js框架中,`ng-repeat`指令是用于遍历数组或对象集合并创建视图元素的常用工具。然而,当需要对数据进行更复杂的布局或自定义显示时,简单的`ng-repeat`可能无法满足需求。这时,我们可以利用`ng-repeat-...

    Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

    主要介绍了Angular.JS利用ng-disabled属性和ng-model实现禁用button效果的相关资料,文中给出了详细的示例代码,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

    Ng-book Angular7 -- 最新版本

    《Angular7全方位解析——基于Ng-book最新版》 Angular7是Google推出的JavaScript框架Angular的第七个主要版本,它在性能优化、开发效率提升以及用户体验改进等方面都有显著的提升。Ng-book作为知名的Angular学习...

    基于angular.js的WUI-DatePicker日期选择器插件

    Angular.js 是一个强大的前端JavaScript框架,它提供了丰富的功能和灵活性,用于构建动态、数据驱动的Web应用程序。而WUI-DatePicker是一款基于Angular.js开发的日期选择器插件,专为提高用户体验而设计,提供了多种...

    ng-book2-angular6-r68

    ng-book2-angular6-r68,即《ng-book2: The Complete Guide to Angular》第六版(修订版68),是关于Angular 2及以上版本的编程语言和框架的教材,由Nate Murray、Felipe Coury、Ari Lerner和Carlos Taborda共同撰写...

    Angular.js中ng-if、ng-show和ng-hide的区别介绍

    在Angular.js中,ng-if、ng-show和ng-hide都是用于控制DOM元素的可见性,但它们之间存在着重要的区别。理解这些指令的差异对于优化Angular应用的性能和逻辑至关重要。 首先,ng-show和ng-hide是通过改变CSS样式来...

    Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

    本文将详细介绍三个常用的Angular指令:ng-if、ng-show/ng-hide以及ng-switch,它们都是用来处理页面内容显示和隐藏的。 1. ng-if: ng-if指令根据指定表达式的值来决定是否在DOM中渲染对应的元素。如果表达式结果...

    ng-flow AngularJS 图片浏览

    "ng-flow AngularJS 图片浏览" 是一个专为AngularJS框架设计的组件,它主要用于在Web应用中实现图片的预览和上传功能。这个组件在iOS、Android以及Windows平台上都经过了测试,确保了跨平台的兼容性,无论是在移动...

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

    在Angular.js中,ng-app和ng-model是两个非常核心的指令(directives),它们分别用于启动Angular.js应用和数据绑定。 首先,让我们详细回顾一下ng-app指令。ng-app指令标记了Angular.js应用的根元素,它可以放置在...

Global site tag (gtag.js) - Google Analytics