Angular双向数据绑定

HTML数据与属性的绑定

数据：

  静态：直接写

  动态(绑定数据)：{{student}}

  <div [innerHTML]="content"><div/>

  //public content=<h2>数据<h2/>解析HTML标签

属性

  静态:<div title="我是div">

  动态:(绑定数据)

  <div [title]="student">

  <div title="{{student}}">

  */

数据循环

<ul>
   <li *ngFor="let item of cars">
       {{item.cate}}
       <ol>
           <li *ngFor="let car of item.list">
               {{car.title}}--{{car.price}}
           </li>
       </ol>
   </li>
</ul>

 

 

 

当前事件对象e.target

(事件名)="函数"；

<input type="text" (keyup)="keyUp($event)">触发事件<button/>

 

test(e){
  var dom:any=e.target;//dom用作对象一定要指定类型，否则容易用属性时候报错(ionic一定会报错)
  dom.style.color="red";
}

 

表单事件ngModel(MVVM)M：ts文件V：HTML文件

ngModel后面的名字时绑定的对象，value时代替输入的值

模块文件引入并配置
 

import { FormModel } from '@angular/forms';
import:[FormModel]

<input [(ngModel)]="keyword">

public keyword;//[]是绑定数据()是触发事件

表单：input(checkbox、radio、select、textarea)

 

 

<ul>
  <li>姓名：<input type="text" ="info.name"><li />
  <li>性别：//name为了把radio放到一组，保证单选，id是为了label使用，点击label中内容,转移到for的id上;value是为双向绑定数据(后台要定义为string<''>)
    <input type="radio" name="sex" id="sex1" [(ngModel)]="info.sex" value="1"><label for="sex1">男<label />
    <input type="radio" name="sex" id="sex2" [(ngModel)]="info.sex" value="2"><label for="sex2">女<label />
  <li />
  <li>城市：//citylist:["北京"，"上海"，"深圳"];city:"北京";
    <select [(ngModel)]="info.city">//把选中的城市(option中的value)跟city双向绑定
      <option value="{{item}}" *ngFor="let item of info.citylist">
        {{item}}
      </option>
    </ select>
  <li />
  <li>爱好：
    <span *ngFor="let item of info.hobby;let key=index">//双向数据绑定item.checked是否被选中;id中因为使用了引号让key失去了动态属性，加上双花括号即可
      <input type="checkbox" id="check+{{key}}" [(ngModel)]="item.checked"><label for="check+{{key}}">{{item.title}}</label>
      &nbsp;
    </span>
  </li>
   <li>备注：
    <textarea [(ngModel)]="info.mark" cols="30" rows="10"></ textarea>
  </li>
 <ul />

 

 

/*实现toDoList

用双向数据绑定代替dom操作

----添加/删除事项-------

<div class="search">

  <input type="text" [(ngModel)]="keyword" /><button (click)="doAdd()">添加</button>

  <ul>

    <li *ngFor="let item of historylist;let key=index">{{item}}---<button (click)="deleteHistory(key)">x</button></li>

  </ul>

 

  public keyword:string;

  public historylist:any[]=[];

  doAdd(){

    if(this.historylist.indexOf(this.keyword)==-1){

      this.historylist.push(this.keyword);

    }

    this.keyword='';

  }

  deleteHistory(key){//ts改变html会重新渲染

    this.historylist.splice(key,1);

  }

<div>

 

<div class="search">

  <input type="text" [(ngModel)]="keyword" /><button (click)="doAdd()">添加</button>

  <ul>

    <li *ngFor="let item of historylist;let key=index">{{item}}---<button (click)="deleteHistory(key)">x</button></li>

  </ul>

 

  public keyword:string;

  public historylist:any[]=[];

  doAdd(){

    if(this.historylist.indexOf(this.keyword)==-1){

      this.historylist.push(this.keyword);

    }

    this.keyword='';

  }

  deleteHistory(key){//ts改变html会重新渲染

    this.historylist.splice(key,1);

  }

<div>

 

------------todolist---------------

<h2>todoList</h2>

<div class="todolist">

  <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />

  <hr>

  <h3>待办事项</h3>

  <ul>

    <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">

      <input type="checkbox" [(ngModel)]="item.status" /> {{item.title}} ------ <button

        (click)="deleteData(key)">X</button>

    </li>

  </ul>

  <h3>已完成事项</h3>

  <ul>

    <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">

      <input type="checkbox" [(ngModel)]="item.status" /> {{item.title}} ------ <button

        (click)="deleteData(key)">X</button>

    </li>

  </ul>

</div>

 

doAdd(e){

  if (e.keyCode == 13) {

    if (!this.todolistHasKeyword(this.todolist, this.keyword)) {

      this.todolist.push({

        title: this.keyword,

        status: 0                   //0表示代办事项  1表示已完成事项

      });

      this.keyword = '';

    } else {

      alert('数据已经存在');

      this.keyword = '';

    }

  }

}

 

deleteData(key){

  this.todolist.splice(key, 1);

}

 

//如果数组里面有keyword返回true  否则返回false

todolistHasKeyword(todolist: any, keyword: any){

  if (!keyword) return false;

  for (var i = 0; i < todolist.length; i++) {

    if (todolist[i].title == keyword) {

      return true;

    }

  }

  return false;

}

*/