如何angular.js

应用CSS我有HTML这样如何angular.js

<div ng-controller="newcontroller"> 
    <div class="firstdiv" ng-show="show">welcome</div> 
     <button ng-click="newfunction">click</button> 
</div>

JS文件这样

app.controller('newcontroller',function($scope) 
    { 
     $scope.show=false 
     $scope.newfunction=function() 
     { 
       $scope.show=true; 

     } 

    });

我有CSS这样 CSS

.firstdiv { 背景：绿色; }

.newclass {背景：黑色;}

我在这里做的，当我在点击按钮点击我显示欢迎信息。我想为该div动态地改变CSS。所以我有另一个名为newclass .sso的CSS类名称，当我点击单击按钮时，我必须应用该新的类在CSS中进行更改....如何做到这一点？

来源

2013-10-31 silvesterprabu

试试这个：

的index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body ng-app="myApp"> 
    <div ng-controller="newcontroller"> 
     <div ng-class="[myclass]">welcome</div> 
     <button ng-click="newfunction()">click</button> 
    </div> 

    <script data-require="[email protected]" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>  
    <script src="script.js"></script>  
    </body> 

</html>

的script.js

'use strict'; 

var app = angular.module('myApp', []); 

app.controller('newcontroller', ['$scope', 
    function($scope) { 

    $scope.myclass = 'firstdiv'; 

    $scope.newfunction = function() { 
     $scope.myclass = 'newclass'; 
    }; 

    } 
]);

的style.css

.firstdiv { background: green; } 
.newclass { background: yellow; }

工作例如： http://plnkr.co/edit/oCZGOM?p=preview

来源

2013-10-31 11:21:34 lukpaw

很少需要一个函数只是为了改变类...而是'ng-class'允许表达式检查一个范围变量 – charlietfl

你说得对，这是一个更好的解决方案。 – lukpaw

我想你应该描述CSS中按钮的所有状态。那么不需要实时改变任何东西。

看一看here

来源

2013-10-31 11:20:51

使用ng-class与表情来检查范围变量

这里的例子，不需要在范围内的任何功能acheive你想要什么。

<div ng-class="{newclass : toggle,firstdiv: !toggle} ">welcome</div> 
<button ng-click="toggle=!toggle">click</button>

范围内：

$scope.toggle=false;

使用这种方法，你不需要写方法来改变你的元素，它们可以通过简单的范围内检查变量的状态而改变

DEMO

来源

2013-10-31 13:20:56 charlietfl

回答

相关问题