AngularJS之双向数据绑定,class绑定

框架

浏览数:196

2019-9-4

之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题。

1、双向数据绑定

  AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指定指令什么的,最终并不会被编译到HTML DOM中,而AngularJS模板文件中编写的指令会切实存在HTML DOM中,作为元素的一个属性。这一点就决定了再vue中动态绑定v-model的方式为首先初始化好数据,然后再动态匹配,无法通过操纵元素属性的方式来实现:

<el-input v-if="item.type==='input'" :type="item.inputType" v-model='formData[item.id]'
                              autocomplete="off" :placeholder="item.placeholder ? item.placeholder : ''"></el-input>

在AngularJS中,可以通过手动设置元素属性,然后再编译成AngularJS元素,具体实现如下:

angular.element($input).attr('ng-model', inputModel);
$compile(angular.element($input))($scope);

2、class绑定

vue比较通俗易懂,直接:class={classA:true/fasle,classB: true/false};

AngularJS中,就有点区别了,true/false的class名用空格分开,根据中括号里面的判断条件的真假来决定显示的class,具体实现如下:

ng-class="{true:'fa fa-angle-up',false:'fa fa-angle-down'}[menu.orderManager]"

[]中的表达式是判断条件

作者:Gerryli