zoukankan      html  css  js  c++  java
  • 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]"

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

  • 相关阅读:
    新汉诺塔
    车的放置
    [NOI 2015]荷马史诗
    [JSOI2008]星球大战
    分组
    星空
    [Luogu4175][CTSC2008]网络管理Network
    [Luogu2617]Dynamic Rankings(整体二分)
    2018冬令营赛前停课总结
    [BZOJ2752][HAOI2012]高速公路
  • 原文地址:https://www.cnblogs.com/gerry2019/p/10284105.html
Copyright © 2011-2022 走看看