使用 AngularJS 更新 CSS答案

【问题标题】：Updating CSS using AngularJS使用 AngularJS 更新 CSS
【发布时间】：2014-04-23 05:01:35
【问题描述】：

我是 AngularJS 的新手，我想学习最好的方法来做到这一点。

这是我的问题：我有一个锚点，点击它后，它应该在“显示全部”和“全部隐藏”类之间切换，并更新 div 的 css。

这是我目前所拥有的：

<a class="{{state}}" href="#" ng-click="ToggleDisplay()"><p>{{stateTitle}}</p></a>
<div>CSS should be updated here</div>

还有一个额外的问题：是否有简单的方法来转换 div 上的 CSS 更改（从 height:200px 到 height:auto）？

【问题讨论】：

如果尺寸的起点或终点为“自动”，则无法在 CSS 中设置动画（过渡），但可以通过定义即开始：max-height:200px 和结束：max-height: 1000px 来破解它- 唯一的问题是过渡时间总是从精确值计算出来的，所以如果内容的高度为 500px，高度的动画将比内容为 900px 时更快地完成
和 css 更新是这样完成的 <div ng-style="{'max-height': state=='show-all' ? '1000px' : '200px'}">whatever</div> jsfiddle.net/tQ9Af
谢谢，成功了！ :) 虽然我决定不使用过渡，因为 div 的高度变化很大，当 max-height 设置为 1000px 时，短 div 的关闭过渡看起来有点滑稽。

【解决方案1】：

要全部显示，隐藏所有方法，你可以使用 ng-show 或 ng-hide 方法，在其中绑定一个关键字，你可以制作一个与锚一起使用的方法来解决你这样的问题方式

HTML

<a ng-click="showAll()">show all</a>
<p ng-show="hide">things to hide</p>
<p ng-show="hide">other things to hide</p>

$scope.showAll=function(){
    if($scope.hide==false){
        $scope.hide=true;
    }else{
        $scope.hide=false
    }
 }

另一种好方法是 ng-class 方法，您可以在其中放置样式代码并使其成为可在 js 文件中更改的变量。

编辑 ng-class 的示例：

<div ng-class="heightsample">i'm a div 100px's height</div>
<button ng-click="height-change()">change</button>

$scope.heightsample={height:'100px'}
$scope.height-change=function(){
    $scope.heightsample={height:'50px'}

}

【讨论】：

谢谢，但我不想隐藏 div，我只想限制它们的高度，所以 ng-show 在我的情况下不起作用。 ng-class 方法更有可能，通过写这个问题，我希望看到如何使用它的好例子。