Question

我为表单验证的进度条创建了一个自定义目录。

第一个进度状态为0％，下面的进度条将显示“0％已完成”消息。

一旦表单有效，则进度条值将从0％增加到50％，并且在提交表单之前，消息将显示“已完成50％”。

HTML

<div ng-app="app" ng-controller="main">
    <p progressbar prog="form1.$valid ? '50':'0'" ></p>
    <p  ng-show= "form1.$valid ? '50% is completed':'0% is complted'">

    </p>
    <form name="form1" novalidate>
        <p>
            <span style="color:blue">1) select One</span><br/>
            <input type="radio" ng-model="user.q1" name="grp1" value="A" ng-required="true"/>A
            <input type="radio" ng-model="user.q1" name="grp1" value="B" ng-required="true"/>B
            <input type="radio" ng-model="user.q1" name="grp1" value="C" ng-required="true"/>C
        </p>
        <p>
            <span style="color:blue">2) select two</span><br/>
            <input type="radio" ng-model="user.q2" name="grp2" value="A" ng-required="true"/>A
            <input type="radio" ng-model="user.q2" name="grp2" value="B" ng-required="true"/>B
            <input type="radio" ng-model="user.q2" name="grp2" value="C" ng-required="true"/>C
        </p>
        <button class="st" ng-disabled="form1.$invalid"> submit</button>
    </form>
</div>

脚本

angular.module("app", [])
.controller("main", ['$scope', function($scope) {

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

根据角度的进度条状态显示消息？

0 个答案: