[Angular 2] *ngFor with index

Let‘s see how to track index when we use ‘ngFor:

            <li *ngFor="#hero of heros | async, #i = index">
               <hero-item [hero]="hero" (changed)="thisHero = $event;" [index]="i"></hero-item>
            </li>

#i = index, simple as that :)

时间： 2024-12-15 22:30:32

[Angular 2] *ngFor with index的相关文章

[Angular 2] ngFor

It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loop. import {Component, View, NgFor} from 'angular2/angular2'; import {TodoService} from './

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

基于angular+bower+glup的webapp

一:bower介绍 1:全局安装安装bower cnpm i -g bower bower常用指令: bower init //初始化文件 bower install bower uninstall 2:bower初始化配置: bower init 后续的填写全部选yes 3:安装依赖(angularjs) bower install -- save angular 4:创建.bowerrc null>.bowerrc 这时候会提示null不是内部指令,但是没问题,已经创建好了. 然后在文件中输

.Net Core+Angular Cli/Angular4开发环境搭建教程

一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm 一.基础环境配置 1.安装VS 2017 v15.3或以上版本2.安装VS Code最新版本3.安装Node.js v6.9以上版本4.重置全局npm源,修正为淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taob

AngularJS实现数据列表的增加、删除和上移下移等功能实例

转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友可以看看. 效果图实例代码 <!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head&g

AngularJS使用ngMessages进行表单验证

本文转载(已经找不到原作者...) 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="userForm"> <input type="text" name="username" ng-model="user.username" ng-minle

1 Set up

1 download the angular2.0 demo from github https://github.com/angular/quickstart 2 new index.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="d

angularjs+requirejs整合

通过requirejs的配置让angularJS可以正常运行.以下是配置的步骤: 环境需求 require.js angular.js 有了这两文件,就可以进行下一步了,具体将文件放到哪个目录,可以跟项目的目录结构走,无所谓. 配置步骤首先要配置require.js的入口文件main.js require.config({ //配置angular的路径 paths:{ "angular":"js/angular", }, //这个配置是你在引入依赖的时候的包名 s

第一个Ionic应用

前面的文章我们介绍了在做Ionic应用之前我们有必要了解.掌握的Angular知识点.现在,我们开始试做我们的第一个Ionic应用.这个例子很简单,非常适合刚接触Ionic的同学. 首先我们获取一下项目文件,你可以到github上现在到本地地址:https://github.com/ionic-in-action/chapter3.git.你可以用任何编写html页面的工具(如:editplus)打开项目.接下来你可以运行看一下已经写好的基础HTML模板(如图). Angular开发简单来说就是