Question

我有一个水平div来显示某些活动的百分比。我有一个带有width=100%的外部div和一个内部div。我必须根据从控制器获得的百分比值用背景颜色填充内部div，但我的问题是百分比值是$scope变量百分比。

我的代码如下：

<div class="outerDiv">
<div class="innerDiv" style="'width':{{percentage}}"></div>

{{percentage}}是我的范围值。但上面的代码工作不正常，所以我需要的是，我必须使用范围值设置div的样式.plz help

Answer 1

您可以使用ng-style="{'width' : width}

在您的控制器中：

$scope.width = '50%';

Answer 2

您的代码可以在没有ng-style的情况下运行，但您需要删除单引号（'width':{{percentage}}到width:{{percentage}}）并在变量的末尾添加px。

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.percentage = '20%';
});

.outerDiv {
  height: 100px;
  background: gray;
}

.innerDiv {
  height: 100%;
  background: blue;
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="outerDiv" ng-app="app" ng-controller="ctrl">
  <div class="innerDiv" style="width:{{percentage}}"></div>
</div>

使用角度范围值设置div的样式

2 个答案: