ionic 双向数据绑定

表单数据双向绑定

在组件中，有一个属性name：

export class HomePage{
    name:string="Tony Stark";
}

把模板中已经准备好的 input 组件通过指令和 name 进行双向绑定。

<ion-list> 
    <ion-item> 
        <ion-label fixed>Name</ion-label> 
        <ion-input type="text" [(ngModel)]="name"></ion-input>
    </ion-item>
</ion-list>

其中 [(ngModel)] 就是将表单和页面组件绑定在一起的方法，当一个表单被绑定到某个属性成员上时，它的value就自然等于这个属性的值。

绑定一个对象的成员

对于像这样的一个对象

obj:any={
   id:100
}

可以这样绑定

<ion-input type="text" [(ngModel)]="obj.id"><ion-input>

Radio 的绑定

对于Radio空间，[(ngModel)]并非直接加在 ion-radio 标签上，而是加在绑定了 ion-radio-group 指令的 ion-list 标签上。

<ion-list radio-group [(ngModel)]="gender"> 
     <ion-list-header>请选择性别</ion-list-header> 
     <ion-item> 
        <ion-label fixed>我是男生</ion-label> 
        <ion-radio value="男"></ion-radio> 
     </ion-item> 
     <ion-item> 
        <ion-label fixed>我是女生</ion-label> 
        <ion-radio value="女"></ion-radio> 
     </ion-item> 
</ion-list>

框架会匹配模型的值和 group 中每个 radio 的value，相等的 radio 会默认选中，这个例子中 gender 在声明时就被赋值为 "女"。

gender:string="女";

Toggle 的绑定

Toggle 组件应该绑定一个布尔变量。

Select 的绑定

Select 组件应将数据绑定在 ion-select 标签上，注意当 multiple="true" 是，select的值应该是一个数组。

hobbies:string[]=['足球','电影'];

<ion-list> 
     <ion-item> 
       <ion-label>
            兴趣爱好[图片上传中...(7.3.gif-46356f-1511168830451-0)]
        </ion-label> 
       <ion-select multiple="true" [(ngModel)]="hobbies"> 
         <ion-option value="足球">足球</ion-option>
          <ion-option value="篮球">篮球</ion-option> 
         <ion-option value="阅读">阅读</ion-option> 
         <ion-option value="电影">电影</ion-option> 
         <ion-option value="旅行">旅行</ion-option> 
       </ion-select> 
     </ion-item>
</ion-list>

Range的绑定Range 应该绑定一个 number 型变量，或者一个可以通过 parseInt 转换成 number 的字符串。

这两种都是可以使用的：

age:number=30;age:string="30";这种情况也不会出错：

age:string="30岁";但是这种就可能引发 NaN 的错误:

age:string="thirty";如果为 range 添加了 dualKnobs="true" 的属性（双滑块），则需要绑定一个包含 lower 和 upper 两个成员的对象。

age

object={ lower:25, upper:35}

Datetime 的绑定

Datetime 组件绑定一个字符串。但是这个字符串的格式是什么样的呢？如果这个字符串的 displayFormat 是 "YYYY-MM-DD" ，那么字符串也需要使用一致的格式吗？

我们可以让字符串默认为空置，通过更改表单先输出一个值。

这时把 displayFormat 改为中文的形式：

datetime组件的值并不和我们看到的格式保持一致，实际上它采用了 ISO 8601 的日期格式标准

2017

2017-11

2017-11-20

2017-11-20T17:30

2017-11-20T17:30:55Z

17:30

17:55

在单纯只有日期或时间的情况下，和 YYYY-MM-DD HH:mm:ss 的格式是一致的，但是同时存在日期和时间的情况下，就要注意它的写法了。

所以说，不论 displayFormat 的格式是什么，最后拿到都是这种格式的字符串，可以直接以这样一个格式和服务器进行交互。但是如果数据库采用了的这一字段采用了 datetime 格式，则需要进行一个转换