Angular框架中控制css样式

    Angular中控制样式这话题在之前一篇文章里曾涉及:http://blog.csdn.net/u011649436/article/details/12249457

    现在决定单独拿出来讨论一下。

    

    开/关某个样式是前端编程中一个非常基本的要求,在jquery年代这功能是挺容易完成的:

$('.blablabla').toggleClass('someClass')
    但在angular中,应尽量避免寻找元素;所以,他们提供了"ng-class"这个指令,具体用法如下:
    html中:
    ng-class的值为一个map,key是class的名字,value为true或false,顾名思义,当true时该样式生效,false则相反;例子中的样式名为"active",值为$scope中的isActive变量。hg-click则绑定'click'方法。
    controller代码中:
    $scope.isActive = false;$scope.click = function() {$scope.isActive = ! $scope.isActive}
    isActive的默认值为false,当click方法执行时,其值会被toggle,从而改变button的样式。
    再强调一下,ng-class会观察里面的变量(这里是isActive),当后者发生改变时,ng-class会根据其值重新设置元素的样式。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部