2

ng-style で 2 つのスタイルを組み合わせたいのですが、そのうちの 1 つは条件付きスタイルです。

ng-style="{'height':height + '%'}"

ng-style="hasScroll !== 0 && {'width': (tableWidth) + 'px'}"

条件が false の場合、幅をオーバーライドせずに両方を組み合わせるにはどうすればよいですか?

以下は、条件が falsefalse の場合に「幅」プロパティをオーバーライドするため、適切ではありません。

ng-style="{ 'height': height + '%', 'width': hasScroll !== 0 ? (tableWidth) + 'px' : undefined }"
4

5 に答える 5

2

次に、コントローラーでロジックを処理することをお勧めします

<div ng-style="getStyles()">
test data
</div>

$scope.getStyles = function () {
   var styleObj = {};
   styleObj['height'] = height + '%';
   if ($scope.hasScroll !== 0) {
     styleObj['width'] = tableWidth + 'px';
   }
   return styleObj;
}
于 2016-01-28T14:58:27.317 に答える
1

これを試して：

ng-style="hasScroll !== 0 && {'width': (tableWidth) + 'px'} || { 'height': height + '%'}"

作業例:

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

function MyCtrl($scope) {
     $scope.has = 1;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl" ng-style=" has != 0 && {'cursor':'pointer','background-color':'blue'} || {'background-color':'blue'} ">
  kick
</div>

于 2016-01-28T15:13:47.910 に答える
0

,分離を行うことで、複数のプロパティを追加できます

<div ng-style="{ 'height': height + '%', 'width': hasScroll !== 0 ? (tableWidth) + 'px' : undefined }">
test data
</div>
于 2016-01-28T14:39:45.640 に答える
0

試すことはできますが、読むのは簡単ではありません:

ng-style="{ 'height':height + '%', 'width': hasScroll !== 0 ? (tableWidth) + 'px' : undefined }"
于 2016-01-28T14:35:54.917 に答える
0

次のようにできると思います：

ng-style="{ width: hasScroll !== 0 ? tableWidth : 0, height: height }"

于 2016-01-28T14:36:29.177 に答える