Angularjs 如何将动态值传递给ProgressBar及以下基于消息的数字表单？

我通过传递静态值来显示进度条、进度条状态消息，如何将动态值传递给进度条和进度条我需要动态显示进度条状态消息。贝娄我写了静态代码。请帮助我向进度条传递动态值，以及进度条状态消息

html
----
<div ng-app="app" ng-controller="main">

    <div>   
        <form ng-hide="form_1" name="form1" novalidate>
            <span>
                <input name="group1" type="radio" value="Yes" ng-model ="user.ans1" ng-required="true" />Yes
                <input name="group1" type="radio" value="NO" ng-model ="user.ans1" ng-required="true" />No
            </span><br/>
            <span>
                <input name="group2" type="radio" value="Yes" ng-model ="user.ans2" ng-required="true" />Yes
                <input name="group2" type="radio" value="NO" ng-model ="user.ans2" ng-required="true" />No
            </span><br/>
            <span>
                <button type="button" ng-disabled="form1.$invalid" ng-click="start();">start</button>
            </span>
        </form>

        <form ng-show="form_2" name="form2" novalidate>
        <div>
            <p progressbar prog="form2.$valid ? '33':'0'" ></p>
            <p>{{form2.$valid ? 'Set 1 of 3 completed':''}}</p>
        </div>
            <span>
               <input name="group3" type="radio" value="Male" ng-model ="gender" ng-required="true" /> Male
               <input name="group3" type="radio" value="Female" ng-model ="gender" ng-required="true" /> Female
           </span><br/>
            <button type="button"  ng-disabled="form2.$invalid" ng-click="form2Next();" >Next</button>
        </form>
        <form ng-show="form_3" name="form3" novalidate>
            <div>
                <p progressbar prog="form3.$valid ? '66':'33'" ></p>
                <p>{{form3.$valid ? 'Set 1 of 3 completed':''}}</p>
            </div>
            <span>
               <input name="group4" type="radio" value="btech" ng-model ="course" ng-required="true" /> Btech
               <input name="group4" type="radio" value="mtech" ng-model ="course" ng-required="true" /> Mtech
           </span><br/>
            <button type="button"  ng-disabled="form3.$invalid" ng-click="form3Next();" >Next</button>
        </form> 
        <form ng-show="form_4" name="form4" novalidate>
            <div>
                <p progressbar prog="form4.$valid ? '100':'66'" ></p>
                <p>{{form4.$valid ? 'Set 1 of 3 completed':''}}</p>
            </div>
            <span>
               <input name="group5" type="radio" value="software" ng-model ="emp" ng-required="true" /> software
               <input name="group5" type="radio" value="hardware" ng-model ="emp" ng-required="true" /> hordeware
           </span><br/>
            <button type="button"  ng-disabled="form4.$invalid" ng-click="form4Next();" >Next</button>
        </form>         
    </div>
</div>

script
------
        angular.module("app", [])
        .controller("main", ['$scope', function($scope) {
            $scope.start = function(){
            if((($scope.user.ans1 == "Yes")&&($scope.user.ans2 == "Yes"))||(($scope.user.ans1 == "No")&&($scope.user.ans2 == "Yes"))){
                $scope.form1Next();
            }
            else{
                $scope.form2Next();
            }
        }// startasignment function End
        $scope.form1Next = function(){debugger;
            $scope.form_1 = true;
            $scope.form_2 = true;
        }
        $scope.form2Next = function(){debugger;
            $scope.form_1 = true;
            $scope.form_2 = false;
            $scope.form_3 = true;

        }
        $scope.form3Next = function(){debugger;
            $scope.form_2 = false;
            $scope.form_3 = false;
            $scope.form_4 = true;
        }
        $scope.form4Next = function(){debugger;
            alert("successfully submited")
            $scope.form_4 = false;
        }

        }])
        .directive('progressbar', [function() {
            return {
                restrict: 'A',
                scope: {
                    'progress': '=prog'
                },
                template: '<div class="stripe" style="background-color: #C7D2D2; height:30px; width:100%;"> <div  ng-style="style" style="background-color:#FFFF00; height:100%"></div> </div>',
                controller: function($scope, $element, $attrs) {       
                 $scope.$watch(function() {
                        $scope.style = {"width": $scope.progress + "%"}
                    })
                }
            }
        }]);

html
----
对
不


对
不


开始

{{form2.$valid？'Set 1 of 3 completed'：''}

男性
女性


下一个

{{form3.$valid？'Set 1 of 3 completed'：''}

B技术
Mtech


下一个

{{form4.$valid？'Set 1 of 3 completed'：''}

软件
钟表


下一个
剧本
------
角度模块（“应用程序”，[]）
.controller（“主”、[“$scope”、函数（$scope）{
$scope.start=函数（）{
如果（（$scope.user.ans1==“Yes”）&（$scope.user.ans2==“Yes”）| |（$scope.user.ans1==“No”）&&（$scope.user.ans2==“Yes”））{
$scope.form1Next（）；
}
否则{
$scope.form2Next（）；
}
}//开始信号功能结束
$scope.form1Next=function（）{debugger；
$scope.form_1=真；
$scope.form_2=真；
}
$scope.form2Next=function（）{debugger；
$scope.form_1=真；
$scope.form_2=假；
$scope.form_3=真；
}
$scope.form3Next=function（）{debugger；
$scope.form_2=假；
$scope.form_3=假；
$scope.form_4=真；
}
$scope.form4Next=function（）{debugger；
警报（“已成功提交”）
$scope.form_4=假；
}
}])
.directive（'progressbar'，[function（）{
返回{
限制：“A”，
范围：{
“进度”：“=prog”
},
模板：“”，
控制器：函数（$scope，$element，$attrs）{
$scope.$watch（函数（）{
$scope.style={“宽度”：$scope.progress+“%”
})
}
}
}]);

如果使用angularjs进度条指令

然后，您可以为prog属性指定一个变量，并根据需要对其进行操作

<p progressbar prog="Progress" ></p>

现在，您可以将

progressbar

放在共享div中（无需隐藏和显示），并可能对其设置动画

搜索angularJs进度条时发现的第一件事是

---

这是一个

我试过了，但它正在工作，你能在演示中给我演示一下它是如何工作的吗？你可以添加你使用的指令或它的库吗？对我来说，我使用了答案中建议的指令我没有使用库，我为进度条编写了静态代码，它正在工作，但现在我正在做动态的，但没有出现，我尝试了你的代码，但它不起作用，请帮助我解决javascript不解析的问题，在JSFIDLE中更新我的代码，你能在jsfiddle中给我看吗，请帮助我更新jsfiddle中的任何代码，

<input type="button" value="add 10" ng-click="AddProgress(10)">

$scope.Progress ='0';

 $scope.AddProgress = function (percentige) {
 $scope.Progress = parseInt($scope.Progress)+percentige; 
 }