[Angular 2] Using ng-model for two-way binding

Two-way binding still exists in Angular 2 and ng-model makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

import {Component} from ‘angular2/core‘;
import {TodoService} from ‘./TodoService‘;

@Component({
    selector: ‘todo-input‘,
    template: `
        <form (submit)="onSubmit()">
            <input type="text" [(ngModel)]="todoModule">
        </form>
    `
})

export class TodoInput{

    todoModule: string;

    constructor(public todoService: TodoService){

    }

    onSubmit(){
       this.todoService.todos.push(this.todoModule);
        console.log(this.todoService.todos);
    }
}
时间: 2024-11-04 18:49:17

[Angular 2] Using ng-model for two-way binding的相关文章

angular中的ng.function

网址:http://www.angularjsapi.cn/#/copy angular.bind 描述:函数以及参数的动态绑定,返回值为动态绑定之后的函数.其中args是可选的动态参数,self在fn中使用this调用. 使用方法是:angular.bind(self,fn,args) 其中self的参数类型是obj,fn的参数类型是function,args传入fn的参数. 例子: var self = {zhaunglongfei:"boyi"};var f = angular.

angular学习(三):ng渲染案例用法总结

前两篇把基本的架子都搭好了,在单独的Controller中处理独立的业务,这时候渲染相应的页面就要用到ng提供的相应组件和事件,下面我采用一一列举的方式,将这些知识都总结于此: ng-click: 案例 <button type="button"class="btn btn-primary" ng-click="showUploadView()">点击上传</button> 说明 声明了一个btn的click事件,对应的c

angular的双向数据绑定

方向1:模型数据(model) 绑定 到视图(view) 实现方法1:{{model变量名}} $scope.num=10 <p>{{num}}</p> 实现方法2: 常用指令(ngRepeat.ngIf.ngShow/Hide/Src....) $scope.list=[{name:'sam',age:22},{name:'tom',age:37},{name:'kim',age:28}] <tr ng-repeat='std in list'> <td>

ng 双向数据绑定

1.方向1:model->View模型数据绑定到视图 绑定的方式:①双花括号 ②常见的ng指令(ngRepeat ngIf ngShow....) 效果:数据一旦绑定到视图上,随着数据的修改,视图会自动更新. 例子:点击按钮,实现数字的自增(count++),并显示在视图中. 对比:DOM操作方式:查找元素.操作元素angular:修改model数据 2.方向2:View->Model将视图中用户的输入/操作 绑定到模型数据 实现方式: ngModel 双向数据绑定:ngModel可以实现双向

Angular.js 的初步认识

MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控制器(controller),操作模型数据. <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.

Angular(1)

1.设计原则 1.YAGNI  不要把未来需求引入当前工程   2.KISS  keep it simple and stupid  语义化标记 合理注释 符合规定的命名 3.DRY(don't repeat youself) 不写重复代码 善于封装 4.高内聚低耦合 内聚: 一个组件内部,不同部分之间关系  耦合不同组件之间的关系 耦合:不同组件之间的关系 5.SRP  单一责任原则,一个模块实现单一的规则 6.OCP 开闭原则 7.LCP原则 最少知识法则 2.设计模式 分为:创建型  结构

angular知识点总结

angularjs angular支持的运算 逻辑运算 比较运算 三目运算 调用字符串对象的成员方法 使用直接变量表示法创建对象 使用数组 (不可以)new var (不可以)调用全局es javascript对象中的分类 1)ECMAScript标准对象 Global String Data RegExp Array Object 可以在任何一个js解析器中使用 2)宿主对象 DOM: node element attribute bom: window document 只能在浏览器中的js

手把手教你用ngrx管理Angular状态

本文将与你一起探讨如何用不可变数据储存的方式进行Angular应用的状态管理 :ngrx/store--Angular的响应式Redux.本文将会完成一个小型简单的Angular应用,最终代码可以在这里下载. Angular应用中的状态管理 近几年,大型复杂Angular/AngularJS项目的状态管理一直是个让人头疼的问题.在AngularJS(1.x版本)中,状态管理通常由服务,事件,$rootScope混合处理.在Angular中(2+版本),组件通信让状态管理变得清晰一些,但还是有点复

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

angular数据重复报错

<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><body><div