Javascript 如何在没有Jquery ui和Boostrap的情况下在angularjs中创建自定义进度条？

我试图在

Angularjs

中创建进度条，但使用

jqueryui

创建进度条。现在，我正在尝试在不使用jqueryui的情况下实现同样的功能，并且只在

angular

中实现

但它不起作用。下面是我的代码，你能帮我吗

html

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

---

jsfiddle:

您只需使用一些CSS和HTML即可实现这一点。

$scope.value

将发挥所有作用。在我的回答中，我使用了一个链接而不是控制器，因为在DOM操作中使用控制器是不习惯的。我试着用两种方式回答这个问题

HTML 5

标记

传统方式

我从在线资源中获取了这个示例，因此CSS可以是任何符合您主题的内容

角度模块（“应用程序”，[]） .controller（“主”、[“$scope”、函数（$scope）{ $scope.value=10 $scope.items=[0,10,20,30,40,50,60,70,80,90,100] }]) .directive（'progressbar'，[function（）{ 返回{ 限制：“A”， 范围：{ “进度”：“=progressbar” }, 链接：函数（$scope、$element、$attrs）{ } } }])

*{margin:0；padding:0；}
正文{字体：14px格鲁吉亚，衬线；}
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
#换页{宽度：490px；页边距：80px自动；}
正文{背景：#fff；文本对齐：中心；颜色：#eee；字体系列：“HelveticaNeue灯光”、“Helvetica Neue灯光”、“Helvetica Neue灯光”、“Helvetica Neue”、Helvetica、Arial、“Lucida Grande”，无衬线；}
h1{字体大小：42px；字体重量：600；边距：0 30px 0；}
前{
背景：黑色；
文本对齐：左对齐；
填充：20px；
保证金：0自动30px自动；
}
.meter{
高度：20px；/*可以是任何东西*/
位置：相对位置；
余量：60px 0 20px 0；/*仅用于演示间距*/
背景:#555；
-moz边界半径：25px；
-webkit边界半径：25px；
边界半径：25px；
填充：10px；
-webkit盒阴影：插图0-1px 1px rgba（255255,0.3）；
-moz盒阴影：插入0-1px 1px rgba（255255,0.3）；
盒影：插图0-1px1pRGBA（255255,0.3）；
}
.米>跨度{
显示：块；
身高：100%；
-webkit边框右上半径：8px；
-webkit边框右下半径：8px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
边框右上角半径：8px；
边框右下半径：8px；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
背景色：rgb（43194,83）；
背景图像：-webkit渐变(
线性的
左下角，
左上角，
彩色光圈（0，rgb（43194,83）），
彩色光圈（1，rgb（84240,84））
);
背景图像：-moz线性梯度(
中底，
rgb（43194,83）37%，
rgb（84240,84）69%
);
-webkit盒阴影：
插图0 2px 9px rgba（255255255,0.3），
插图0-2px6pxRGBA（0,0,0,0.4）；
-moz盒阴影：
插图0 2px 9px rgba（255255255,0.3），
插图0-2px6pxRGBA（0,0,0,0.4）；
框阴影：
插图0 2px 9px rgba（255255255,0.3），
插图0-2px6pxRGBA（0,0,0,0.4）；
位置：相对位置；
溢出：隐藏；
}
.meter>span:after..animate>span>span{
内容：“；
位置：绝对位置；
顶部：0；左侧：0；底部：0；右侧：0；
背景图像：
-webkit梯度（线性、0、100%100%，
颜色停止（.25，rgba（255，255，255，.2）），
颜色停止（.25，透明），颜色停止（.5，透明），
颜色停止（.5，rgba（255，255，255，.2）），
颜色停止（.75，rgba（255，255，255，.2）），
颜色停止（.75，透明），到（透明）
);
背景图像：
-莫兹线性梯度(
-45度，
rgba（255，255，255，.2）25%，
透明25%，
透明50%，
rgba（255，255，255，.2）50%，
rgba（255，255，255，.2）75%，
透明75%，
透明的
);
z指数：1；
-webkit背景大小：50px 50px；
-moz背景大小：50px 50px；
-webkit动画：移动2s线性无限；
-webkit边框右上半径：8px；
-webkit边框右下半径：8px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
边框右上角半径：8px；
边框右下半径：8px；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
溢出：隐藏；
}
.动画>跨度：之后{
显示：无；
}
@-webkit关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：50px 50px；
}
}
.orange>span{
背景色：#f1a165；
背景图像：-莫兹线性梯度（顶部，#f1a165，#f36d0a）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0，#f1a165）、颜色停止（1，#f36d0a））；
背景图像：-webkit线性渐变（#f1a165，#f36d0a）；
}
.red>span{
背景色：#f0a3a3；
背景图像：-moz线性梯度（顶部，#f0a3a3，#f42323）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0，#f0a3a3）、颜色停止（1，#f42323））；
背景图像：-webkit线性梯度（#f0a3a3，#f42323）；
}
.nostripes>span>span、.nostripes>span:after{
-webkit动画：无；
背景图像：无；
}

--选择当前进度--
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})
            })
        }
    }
}])

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'
        },
        template: '<div style="background-color: red; height:60px; width:100%;"> <div  ng-style="style" style="background-color:blue; height:100%"></div> </div>',
        controller: function($scope, $element, $attrs) {


          $scope.$watch(function() {
                $scope.style = {"width": $scope.progress + "%"}
            })
        }
    }
}])