AngularJS之雙向數據綁定,class綁定

之前一直都是用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]"

[]中的表達式是判斷條件