[Angular 2] Template property syntax
2015-10-26 04:15
441 查看
This lesson covers using the [input] syntax to change an element property such as “hidden” or “content-editable”. Using properties eliminates the need for Angular 1’s old directives such as ng-show and ng-hide as you’re now able to directly access any property on your element.
todoService.ts
todoList.ts
todoService.ts
export class TodoModel{ status: string = "started"; constructor( public title: string = "" ){} toggle(): void{ if(this.status === "started") this.status = "completed"; else this.status = "started"; } }
todoList.ts
import {Component, View, NgFor} from 'angular2/angular2'; import {TodoService} from './todoService'; @Component({ selector: 'todo-list' }) @View({ directives: [NgFor], template: ` <div> <div *ng-for="#todo of todoService.todos"> <span [content-editable]="todo.status === 'started'">{{todo.title}}</span> <button (click)="todo.toggle()">Toggle</button> </div> </div> ` }) export class TodoList{ constructor( public todoService:TodoService ){ } }
相关文章推荐
- VmWare10 32位安装CentOS7遇到的问题及解决办法
- 如何判断linux用户是否为root用户
- iOS应用架构谈 view层的组织和调用方案
- Xshell学习--菜鸟篇
- 1.windows技巧-开机规避自动打开go_miscrosoft网站
- hadoop集群搭建——轻松版
- linux下设置了SSH免密码登录但还是需要输入密码的解决办法
- autoprefixer
- Linux Bash代码 利用for循环实现命令的多次执行
- 《HBase权威指南》读书笔记8:第八章 架构
- ubuntu14.04 配置hadoop
- Linux 操作系统初探
- centos 关闭进程
- 关于网站性能优化准则
- Tomcat8 安装和配置
- apache代理服务器设置
- Apache与Tomcat整合实现动静分离与负载均衡的配置实践
- Apache与Tomcat的整合详解(Linux)
- 大型网站技术架构-概要
- 自助建站系统怎么就不能SEO了?