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 of angular来获得动态宽度？我尝试过：

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

ngStyle AngularJs放置变量属性

3 个答案: