Question

我在我的一个项目中使用了此进度条。如何在进度条上添加显示价值百分比的标签？

angular.module("app", [])
.controller("main", ['$scope', function($scope) {
    $scope.value = 10
    $scope.items = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}])
.directive('progressbar', [function() {
    return {
        restrict: 'A',
        scope: {
            'progress': '=progressbar'
        },
        controller: function($scope, $element, $attrs) {
            $element.progressbar({
                value: $scope.progress
            })

            $scope.$watch(function() {
                $element.progressbar({value: $scope.progress})
            })
        }
    }
}])


<div ng-app="app" ng-controller="main">
    <div progressbar="value"></div>
    <select ng-model="value" ng-options="item as item + '%' for item in items">
        <option value="">-- Select current progress --</option>
    </select>
</div>

Answer 1

使用此+ CSS检查更新的jsfidle，您可以在进度条上显示百分比值

代码如下

<div ng-app="app" ng-controller="main">
    <div class="progress" progressbar="value"><span>{{value}} %</span></div>
    <br>
    <select ng-model="value" ng-options="item as item + '%' for item in items">
        <option value="">-- Select current progress --</option>
    </select>
</div>

和CSS样式

.progress{
  text-align:center;
}
.progress span{
  position:absolute;
}

如何在Angular JS中将百分比值标签添加到jquery-ui进度栏？

1 个答案: