Angular Js ng-style有條件評估px

嘗試根據其高度設置元素的樣式。（也就是說，如果高度< X「風格1」，否則「式2」。Angular Js ng-style有條件評估px

的語法是正確的，但對像素高度屬性的評價問題。

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]"

不起作用

來源

2014-11-07 Robert Green MBA

'[parseInt（height）<200]'會起作用嗎？ – 2014-11-07 02:52:43

height < 200px不會起作用，因爲200px非數值。

你能做到這一點

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

來源

2014-11-07 03:58:51 Cineris

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版：我用結合在textarea上實時查看樣式變化+在茉莉花上的TODO（測試元素offsetHeight變化）

希望它有幫助。

來源

2014-12-13 02:31:47

Angular Js ng-style有條件評估px

回答

相關問題