angular2的ngfor ngif指令嵌套

angular2的ngfor ngif指令嵌套 ng2 结构指令不能直接嵌套使用,可使用<ng-container>标签来包裹指令示例如下: <ul> <ng-container *ngFor="let item of lists"> <div class="thumb p-date" *ngIf="item.picurl"> <a href="# "><im…

一.科普概要说明我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaScript的框架,Angular2后是基于 TypeScript来写的有兴趣的朋友可以了解下NG-ZORRO Ant Design of Angular https://ng.ant.design/docs/introduce/zh Angular 官方文档地址https://angular.i…

AngularJS指令嵌套时link函数执行顺序的问题

今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比如: APP.directive("子指令", function () { return { scope: { 变量A:"=父指令的参数" }, restrict: 'A', replace: false, link: function (scope, elem, at…

angularJS中的ng-show、ng-if指令

angularJS中的ng-show.ng-hide.ng-if指令都可以用来控制dom元素的显示或隐藏. 1. ng-show和ng-hide 根据所给表达式的值来显示或隐藏HTML元素.元素会渲染出来,只是通过css隐藏了. 即DOM中会存在, 通过选择符可以获取到此元素的. 2.ng-if指令可以根据表达式的值在DOM中生成或移除一个元素.如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除(DOM中不会存在, 通过选择符无法选择到),否则生成一个新的元素插入DO…

--@angularJS--较复杂的指令嵌套demo——综合小实例：登陆界面

1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>custom-directive</title> <meta charset="utf-8"> <link rel="stylesheet" href="../css/bootstrap.css">…

angular2路由之routerLinkActive指令

angular2的routerLinkActive指令在路由激活时添加样式class .red{ color: red;} <a routerLink="/user/login" routerLinkActive="red">login</a> 当url是user或者/user/login的时候,a标签将会被加上classred.当url变化为别的时,class将会被移除. 如何添加两个class <a routerLin…

Angular2 关于*ngFor 嵌套循环

在项目开发中拿到的数据是这样的,要循环遍历出来.可是在ng2中好像不能直接遍历Object datas: any = [ { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"}, { num: 1, date: "2017-04-12", sellNum: "1231234"…

angualrJS（mvc）指令嵌套使用的一些问题

angular的指令拥有一个独立作用域的概念. 一般定义指令的形式: define(['app'],function(mianapp){ mainapp.directive("tlmsAolInfoAdd",[function(){ return { templateUrl:'js/directive/...../tlmsAolInfo_add.html', scope:{ tmlsaolinfo:'=' }, link:function(s,ele,attrs){ } } }]);}…

Angular2 内置指令 NgFor 和 NgIf 详解

http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的Typescript所以在看下…

angular2 *ngIf与[hidden]对比<转>

在AngularJS 1中,如果想切换DOM元素的显示状态,估计你会用AngularJS 1内置的指令如:ng-show 或者 ng-hide: AngularJS 1示例: <div ng-show="showGreeting"> Hello, there! </div> 而angular2里,新的模版语法允许你将表达式绑定到DOM元素的任何原生属性上. 这个绝对牛逼的功能带来了无限的可能.其中一项就是绑定表达式到原生的hidden属性上,和ng-show有点…

angular 实例笔记之嵌套指令间的传参

最近在项目中遇到了需要嵌套指令的情况,指令在嵌套后子指令必须获得父指令中的数据来进行判断,但是在写传参的时候遇到了坑,因此记录下来,防止以后遗忘,个人的肤浅理解,欢迎大家留言讨论首先,关于directive的scope绑定作用域网上已经有一大堆了,无非就是scope的三种绑定方式,@,=和&,在设置上对应的绑定属性后即可从父作用域中继承并创建一个独立作用域,如 //html中 <my-dir name="lvyi"></my-dir> //js中 ap…

angular(mvc)指令的嵌套使用

关于指令嵌套的使用,取值问题. 原理类似于控制器中使用指令,父指令类似于控制器,子指令就类似于控制器中指令.通过传值方式‘=’,我们直接可以在父指令中获取数据举一个例子: 有个指令parentDirective 模板文件是:parentHtml 还有一个childDirective myapp.directive("childDirective",[function(){ return{ template:'....../childHtml', link:function(){ ng…

Angular2学习笔记——NgModule

在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们. 模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule.HttpModule.RouterModule. NgModule的…

angular2系列教程（二）模板语法

今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧! 例子…

Angular2 架构

1. 说明 Angular 2 是一个用 HTML 和 JavaScript (或者可以编译成JavaScript)来构建应用程序的框架.该框架包含了一系列的库. 在 Angular 里,我们这样来构建应用程序:用带 Angular 扩展语法的 HTML 写模板 ,用组件类管理这些模板,用服务添加应用逻辑, 用根组件完成 Angular 启动 . 首先,我们来看一些整体的结构图,这个图来自于官方网站. 通过图可以看出,Angular 应用中的 8 个主要部分: l 模块 (Mod…

理解 angular2 基础概念和结构 ----angular2系列（二)

前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependency Injection 本文简单介绍一下,这些知识点,以浅入的方式理解angular2的基础概念和结构. 一.Module (模块) Angular 是模块化的. Modules 导出 classes, function, values , 以便在其他模块导入使用. angular应用由模块组成,…

Angular2.0-组件

截止到目前为止,Angular2.0完成了其alpha-32版本的开发,新的版本还在迭代开发当中,这其中有个问题,就是每个版本相比于以前的版本都会有一些改动,包括API方面的修改,这会导致很多基于以前版本写的demo都无法运行,而且其官网上给出的教程也是基于之前的版本而没有及时更改,这就造成了即使按照官网的教程去编写运行也可能得到不预期的结果,针对这种情况,本文采用最新的较稳定的Angular alpha-31版本重构其官网上的step by step guide,并以此为基点,介绍Angula…

Angular2经典文章集锦

Angular Metadata 等基础知识 http://www.jianshu.com/p/aeb11061b82c Metadata告诉Angular如何处理一个类,只有我们将它通告给Angular,它才算一个组件.我们通过将metadata附属到类来告诉Angular HeroListComponent是一个组件.用TypeScript附加metadata的简单方法是使用一个decorator @Component({ selector 插入组件的标签名 templateUrl 组件模板…

从ng-repeat到NgFor

看这篇文章基本明白怎么渲染模板,但是我的工程会报错说#号非法,这篇的写法也不好用. angular2.0.0的语法集: Angular for TypeScript 语法快速指南 (基于2.0.0版本) 引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule); 使用JIT编译器引导一个AppM…

ng-book札记——内置指令

Angular提供了一些内置指令(directive),这些添加在HTML元素(element)上的特性(attribute)可以赋予更多的动态行为. NgIf ngIf指令用于在某个条件下显示或者隐藏元素,该条件取决于传入指令的表达式的结果. <div *ngIf="false"></div>  <div *ngIf="a > b"></div> <!-- a大于b…

ASP.NET MVC和Web API中的Angular2 - 第1部分

下载源码 - 903.5 KB 内容第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件第2部分:使用Angular2管道进行过滤/搜索,全局错误处理,调试客户端介绍由于Angular2广泛应用于Web和移动开发的客户端框架,在本文中,我将尝试解释一步一步的指导,使用Angular2和MVC Web API创建基本的CRUD(创建,读取,更新和删除)应用程序作为后端RESTful API .我将创建空白的ASP.NET MVC应…

Angular2 入门详解

AngularJS 2 快速入门 npm是什么? npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js之后配置npm: 配置npm的全局模块的存放路径以及cache的路径: 查看全局模块路径:npm config get prefix 查看全局cache路径:npm config get cache 在NodeJs下建立"node_global"及"node_cache"…

Angular2新人常犯的5个错误

看到这儿,我猜你肯定已经看过一些博客.技术大会录像了,现在应该已经准备好踏上angular2这条不归路了吧!那么上路后,哪些东西是我们需要知道的? 下面就是一些新手常见错误汇总,当你要开始自己的angular2旅程时,尽量避免吧. 注:本文中,我假设诸位已经对angular2的基础知识有所了解.如果你是绝对新手,之前只听说过,完全没概念什么是angular2的,先去读读下面这些资料: Angular docs Victor Savkin's blog Thoughtram's Angular 2…

angular2.0学习日记1

使用NG2之前需要安装node以及Npm环境,并到node下下载ng2所需要得文件,具体配置请到https://angular.cn/docs/ts/latest/quickstart.html按照提示操作,安装完毕并创建后各种目录后,正式开始编写第一个HelloWordl; ng2是基于typescript,文件以ts结尾代表typesript文件,启动Npm start后,node会监视目录下的文件变得将ts编译为js文件首先创建根模块文件app/app.module.ts, 每个Angu…

Angular2、4入门基础知识（小的概念）

1. 使用引用符来格式化HTML代码. @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] }) 2. 数据双向绑定方式. 在使用表单输入绑定数据之前,我们需要引入表单模块FormsModule包至我们的Angular模块中.引入包的方法是,直接添加需要的包至NgModel的imports数组中. import { Br…

Angular2笔记：NgModule

Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Directives.Pipes,引入Service,并控制外部组件对内部成员的访问权限. NgModule的主要属性如下: declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员 providers:模块内部成员能够访问使用的Service…