[英]How to create custom progress bar in angularjs Without Jquery-ui and without Boostrap?
[英]How to add the percentage value label to jquery-ui Progress bar in angular JS?
我在一个项目中使用了此进度条。 如何添加在进度条上显示价值百分比的标签?
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>
使用此+ 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.