Question

在演示应用程序下方显示了三个不同的进度条。

现在用户需要选择他/她想要更改值的进度条然后点击同一页面上提供的按钮点击。

var app = angular.module('myApp',[]);

app.component('listComponent', {

  template:'<div ng-repeat="progress in $ctrl.obj.bars track by $index">' +
  '<progress value="{{progress}}" max="{{$ctrl.obj.limit}}">{{progress}}</progress><br>'+
  '</div>'+
  '<br>' +
  '<div>' +
  'Selected Progressbar : {{$ctrl.selectedProgressbar}}' +
  '<span>' +
  '<select name="selectedProgressbar" ng-model="$ctrl.selectedProgressbar">' +
  '<option ng-repeat="progress in $ctrl.obj.bars track by $index" value="{{$index}}">{{progress}}</option>' +
  '</select>' +
  '</span>' +
  '<span ng-repeat="btn in $ctrl.obj.buttons">' +
  '<button class="btn" ng-click="$ctrl.changeProgress(btn, $ctrl.selectedProgressbar)">{{btn}}</button>' +
  '</span>' +
  '</div>',
  controller: function () {

    this.obj = {
      "buttons": [
        10,
        38,
        -13,
        -18
      ],
      "bars": [
        62,
        45,
        62
      ],
      "limit": 230
    };

    function changeProgressbar(val){
      var val = parseInt(val);
      var barValue = this.obj.bars[this.selectedProgressbar];
      var selectedBar = this.selectedProgressbar;
      var bars = this.obj.bars;

      // this.obj.bars[0] = parseInt(this.obj.bars[0]) + parseInt(val);
      // if we remove comment from above code and comment below one then progresbar value changes at same time
      // but with below code its not changing at same time its changing when we click on any button or change progreebar selection
      if(val > 0){
        var total = parseInt(barValue) + val;

        var update = setInterval(function() {
          if (parseInt(barValue) > total) {
            clearInterval(update);				
          }
          barValue = parseInt(barValue) + 1;
          bars[selectedBar] = barValue;
        }, 15);
      }
    }
    this.changeProgress = changeProgressbar;
  }
});

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="This is just demo application by using Angular 1.6">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Progressbar in Angular 1.6</title>
  <style type="text/css" media="screen">
		progress:after {
		    display: block;
		    content: attr(value);
		    text-align:center;
		}		
  </style>
</head>
<body ng-app="myApp">
  <list-component></list-component>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  <script>
   
  </script>
</body>
</html>

jsBin就在这里，

现在在选择任何进度条之后，然后单击前两个按钮，然后在progreebar上找不到任何更改

但是只要再次单击或选择其他一些进度条，那么值就会发生变化。

Answer 1

完成代码后，我发现了一些问题。

您应该更改changeProgressbar功能并删除间隔功能。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Progressbar in Angular 1.6</title>
  <style type="text/css" media="screen">
		progress:after {
		    display: block;
		    content: attr(value);
		    text-align:center;
		}		
  </style>
</head>
<body ng-app="myApp">
  <list-component></list-component>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  <script>
    var app = angular.module('myApp',[]);
    app.component('listComponent', {
        // isolated scope binding
        template:'{{$ctrl.obj.bars}}<div ng-repeat="progress in $ctrl.obj.bars track by $index">' +
                  '<progress value="{{progress}}" max="{{$ctrl.obj.limit}}">{{progress}}</progress><br>'+
                 '</div>'+
                 '<br>' +
                 '<div>' +
                    'Selected Progressbar : {{$ctrl.selectedProgressbar}}' +
                    '<span>' +
                      '<select name="selectedProgressbar" ng-model="$ctrl.selectedProgressbar">' +
                          '<option ng-repeat="progress in $ctrl.obj.bars track by $index" value="{{$index}}">{{progress}}</option>' +
                      '</select>' +
                    '</span>' +
                    '<span ng-repeat="btn in $ctrl.obj.buttons">' +
                      '<button class="btn" ng-click="$ctrl.changeProgress(btn, $ctrl.selectedProgressbar)">{{btn}}</button>' +
                    '</span>' +
                  '</div>',
        controller: function () {
  
            this.obj = {
                "buttons": [
                    10,
                    38,
                    -13,
                    -18
                ],
                "bars": [
                    62,
                    45,
                    62
                ],
                "limit": 230
            };
  
            function changeProgressbar(val){
                var val = parseInt(val);
                var barValue = this.obj.bars[this.selectedProgressbar];
                var selectedBar = this.selectedProgressbar;
                var bars = this.obj.bars;
                
                // this.obj.bars[0] = parseInt(this.obj.bars[0]) + parseInt(val);
                // if we remove comment from above code and comment below one then progresbar value changes at same time
                // but with below code its not changing at same time its changing when we click on any button or change progreebar selection
                if(val > 0){
                    var total = parseInt(barValue) + val;
                     
                        if (parseInt(barValue) > total) {
                            clearInterval(update);				
                        }
                  else
                    {
                      barValue = total;
                      bars[selectedBar] = barValue;
                    }
                    
                }
            }
            this.changeProgress = changeProgressbar;
        }
    });
  </script>
</body>
</html>

＆＃13;

请跑上面的SNIPPET

Here is a working DEMO

范围模型更新

1 个答案: