Angular Js ng-style条件求值px

Question

尝试根据高度设置元素的样式。(即，如果高度

语法是正确的，但是计算单位像素的高度属性是有问题的。

ng-class="{true:'panel panel-success', false:'panel panel-danger'}[documents.length > 0]"

效果很好，但是

ng-class="{true:'panel panel-success', false:'panel panel-danger'}[height < 200px]"

不工作

Answer 1

因为200px不是数字，所以height < 200px不起作用。

你可以这样做

<div class="panel" ng-class="height < 200 ? 'panel-success' : 'panel-danger'">
    ...
</div>

Answer 2

DOM操作:您需要的是一个指令!！

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

elemstyle.controller('HeightBasedElCtrl', ['$scope', function($scope){ 

  $scope.data = {
    maxH : 200
  };

}]);


elemstyle.directive('heightBasedCss', [function(){
  return {
    transclude : true,
    template : '<div ng-class="{true : \'panel panel-success\', false: \'panel panel-danger\'} [ checkHeight() ]" ng-transclude><div>',
    link: function(scope, elem, attrs) {

        scope.checkHeight = function() {

            return elem[0].offsetHeight < scope.data.maxH; 
        };
    }  
  };
}]);

现在，您要做的就是使用以下指令：

<div height-based-css>
    <!-- 
        add whatever content you like here ... 
    -->
</div>

尝试使用jsfiddle：http://jsfiddle.net/jfabfab/cL3Lda69/

茉莉测试：http://jsfiddle.net/jfabfab/taakfhhs/

关于jsfiddle版本的注意:我在一个文本区域上使用了绑定，以实时查看样式变化+ jasmine上的TODO (测试元素offsetHeight变化)

希望能有所帮助。