ngStyle AngularJs 放置变量属性

Question

我需要使用 uikit 创建一个进度条。根据 uikit，它是这样工作的：

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>

当然这是一个静态方法。所以我创建了一个计算角度百分比的函数：

getPercentage: function() {
                var self = this;
                var done = this.downloadStatus.done.replace(/,/g, "");
                var total = this.downloadStatus.total.replace(/,/g, "");
                self.percentage = 0;
                if (parseInt(total) != 0) {
                    self.percentage = (parseInt(done) / parseInt(total)) * 100;
                }
                return self.percentage;
            } 

条形的“样式”决定了它在 html 中的宽度。是否可以使用 ng-style 的角度来获得动态宽度？我试过了：

<div class="uk-progress">
        <div class="uk-progress-bar" ng-style="{{getPercentage()}}">40%</div>
    </div>

但不起作用。谢谢

Answer 1

<div class="uk-progress-bar" ng-style="getPercentage()">40%</div>

ngStyle 应该是动态的，它的属性是一个表达式（您可能需要将它放在单引号中以使其成为静态字符串）。否则将使用样式。

Answer 2

ngStyle 不需要{{}}。

你可以试试：

angular.module('app', [])
  .controller('testController', function($scope) {
    $scope.test={color: "red"}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>


<div ng-app="app">
  <div ng-controller="testController">
    
    <div ng-style="test">{{test}}</div>        
    <input type="text" ng-model="test.color"/>
    
  </div>
</div>

Answer 3

如何将动态样式保存在示波器上

$scope.progressBarWidth = getPercentage();

并在下载进度或触发进度条移动的任何内容旁边更新它，并将其包围在 $asyncEval

$scope.$evalAsync(function() {
   $scope.progressBarWidth = getPercentage();
});

这样它会更新进度条。 您的 HTML 将如下所示

<div class="uk-progress-bar" ng-style="progressBarWidth">40%</div>