Angular Js ng-style Условная оценка px

Question

Попытка установить стиль элемента на основе его высоты. (то есть, если высота

Синтаксис правильный, но проблема заключается в оценке свойства height в пикселях.

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

height < 200px не будет работать, потому что 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: я использовал привязку к текстовой области, чтобы увидеть изменение стиля в реальном времени + TODO для jasmine (тестовый элемент offsetHeight изменяется)

Надеюсь, поможет.