Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle

这几个都关于样式及类名修改的，所以先把样式代码贴上吧。

  .red{color:red}

  .blue{color:blue}

写案例用到的样式就这么简单的两个，下面进入正题。

ngClass

ngClass指令允许在HTML标签上通过绑定一个代表所有将被添加的类的表达式去动态的设定CSS类名。

该指令操作有三种不同的方式，根据三种类型的表达式计算结果为：

如果表达式计算的结果是个字符串，那么这个字符串就是一个或多个以空格分隔开的类名；
如果表达式计算的结果是个数组，而且这个数组的元素都是字符串，那么这个数组的每个元素就是一个或多个以空格分隔开的类名；
如果表达式的计算结果为一个对象，那么对象的每个键值对的相对应的有真实存在的值将会被当作类名。

格式：ng-calss=“value” ng-calss=“{true：’class-one’，false：“classs-two”}[value]”

value：表达式。

使用代码：

  <input type="button" ng-click="isChecked = !isChecked" value="toggle" />

  <span ng-class="{red:isChecked}">Hello World !!!</span>

  <span ng-class="{true:'red'}[isChecked]">Hello World !!!</span>

ngClass可以用于一些动态样式的变化，当满足某某某条件需要改变样式的时候（比如：验证不通过时显示红色边框），这种的在项目开发中用到的地方还是较多的。

ngClassEven/ngClassOdd

ngClassEven和ngClassOdd 指令和ngClass工作原理一样，除此之外，他们在ng-repeat里分别对偶（奇）数行有对应的影响。

格式： ng-calss-even=“value” ng-class-odd=“value”

value：表达式。

使用代码：

  <ol ng-init="items = ['A','B','C','D']">

    <li ng-repeat="i in items"><span  ng-class-odd="'red'" ng-class-even="'blue'">{{i}}</span></li>

  </ol>

上面这串代码返回的结果就是奇数行的是红色字体，偶数行的是蓝色字体，我们在做表格数据的时候或者列表数据的时候用的较多，而且该指令使用也方便。

ngStyle

ngStyle指令允许在HTML元素上设置css样式。

格式：ng-style=“value” class=”ng-style:value”

value:表达式。

使用代码：

  <div ng-app="Demo">

    <div ng-controller="testCtrl as ctrl">

      <p ng-style="ctrl.red">Hello World</p>

      <p class="ng-style:ctrl.blue">Hello World</p>

    </div>

  </div>

  (function () {

    angular.module("Demo", [])

    .controller("testCtrl", testCtrl);

    function testCtrl() {

        var vm = this;

        vm.red = { color: "red" };

        vm.blue = { color: "blue" };

    };

  }());

动态设置css样式，这个指令需要和ngClass区分下，ngClass是动态设置css类名，ngStyle是动态设置css样式。

巴特西

Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle

最新文章

热门文章