值属性不会绑定到 ui.bootstrap 进度条

Question

我无法将我的 $scope 中的数据绑定到 ui.bootstrap 进度条中的值属性

Angular 控制器

angular.module('app')
  .controller('progressbarController', function($scope, dataConstant) {
  'use strict';

  $scope.dataConstant = dataConstant;

  $scope.stock = dataConstant.item.counts.statuses.stock;
  $scope.lost = dataConstant.item.counts.statuses.lost;
  $scope.progress = dataConstant.item.counts.statuses.progress;

  $scope.totalParts = $scope.stock + $scope.lost + $scope.progress;

  $scope.calculatePercentage = function() {
    var a = dataConstant.item.counts.statuses.stock || 0,
        b = dataConstant.item.counts.statuses.lost || 0,
        c = dataConstant.item.counts.statuses.progress || 0,
        sum = a + b + c,
        ab = a / sum,
        bc = b / sum,
        cd = c / sum,
        aPercent = ab.toFixed(2) * 100,
        bPercent = bc.toFixed(2) * 100,
        cPercent = cd.toFixed(2) * 100;
    console.log('stock is ' + aPercent + '% of ' + sum);
    console.log('Lost is ' + bPercent + '% of ' + sum);
    console.log('progress is ' + cPercent + '% of ' + sum);
    $scope.sum = sum;

    $scope.aPercent = aPercent;
    $scope.bPercent = bPercent;
    $scope.cPercent = cPercent;
  };
  $scope.calculatePercentage();

});

翡翠进度条

div(ng-controller='progressbarController')
  progress(data-total="{{sum}}", value="{{sum}}")
    bar(class="stock", value="{{aPercent}}") {{ stock }}
    bar(class="lost", value="{{bPercent}}") {{lost}}
    bar(class="unconfirmed", value="{{cPercent}}") {{progress}}

为什么 aPercent、bPercent 或 cPercent 不绑定到条形元素中的值属性？

Answer 1

您不必插入绑定到 value 属性的表达式。试试这个：

div(ng-controller='progressbarController')
  progress(data-total="{{sum}}", value="sum")
    bar(class="stock", value="aPercent") {{ stock }}
    bar(class="lost", value="bPercent") {{lost}}
    bar(class="unconfirmed", value="cPercent") {{progress}}

值属性不会绑定到 ui.bootstrap 进度条

Value attribute won't bind to ui.bootstrap progressbar

javascript

angularjs

pug

Angular 控制器

翡翠进度条