在ng-repeat中使用ng-init调用函数只能得到循环中最后一项的结果

时间：2017-06-13 09:42:10

标签： javascript angularjs

我正在尝试更改表格中每行的进度条内容。为此，我在ng-repeat中使用ng-init，这是我的代码：

观点：

<tr ng-repeat-start="p in projetsListe" ng-init={{progressBar($index)}}>
  <td>
  <button class="btn btn-info btn-sm" ng-click="p.expanded = !p.expanded" expand data-toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
  <span ng-bind="p.expanded ? '-' : '+'"></span>
  </button>
  </td>
  <td>{{p.NomProjet}}</td>
  <td>{{p.Responsable}}</td>
  <td>{{trestant[$index]}}</td>
  <td><div class="progress">
       <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="40" id="pg1" aria-valuemin="0" aria-valuemax="100"><label id="l1"></label>
       </div>
       <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" id="pg2" aria-valuemin="0" aria-valuemax="100"></div>
       </div>
       <label style="font-size :10px"><i class="fa fa-circle" style ="color : #df6d69"></i> Temps Passé : {{tpasse[$index]}}h</label>
                               &nbsp &nbsp
       <label style="font-size :10px"><i class="fa fa-circle" style ="color : green"></i> Temps Prévu : {{tprev[$index]}}h</label>
   </td>
</tr>

我的功能：

 $scope.progressBar= function(i){   
  var tpa;
        var p1 = document.getElementById('pg1');
        var p2 = document.getElementById('pg2');
        var l1 = document.getElementById('l1');
        tpa = ($scope.tpasse[i]*100)/$scope.tprev[i];
           if(tpa<=100){
             p1.style.width =  tpa + '%';
             p2.style.width =  100-tpa + '%';
             l1.innerHTML = " ";
           }
           else{
             p1.style.width = '100' +'%';   
             l1.innerHTML = "Attention : Temps prévu dépassé !";
           }  
 };

在结果中我只得到表格最后一行的数据，它出现在第一行：

enter image description here

此结果应出现在第二行，现在为空，而第一行应该有不同的结果。关于如何解决这个问题的任何建议？

这是一个说明此问题的plunker：https://plnkr.co/edit/nGxqMOPejKMINb89Ewwx?p=preview

2 个答案:

答案 0 :(得分：1)

你鳕鱼的主要问题是你对不同的元素有相同的id。这是不允许的，所以只有你的进度条没有正确。以下是解决您问题的代码。但我建议的是，您的代码还有其他问题，例如您使用ng-init={{}progressBar($index)}进行插值，但这会将错误抛出为progressBar returns nothing。我认为你需要正确地审查你的代码。 

// Code goes here
var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function ($scope) {

$scope.tpasse = ['5049','26','100'];
$scope.tprev = ['688','336','400'];

$scope.projetsListe = [
    {
      "NomProjet" : "Project1",
      "ResponsableApitech" : "Jean"

    },

    {
     "NomProjet" : "Project2", 
     "ResponsableApitech" : "Edward"

    },

    {
     "NomProjet" : "Project2", 
     "ResponsableApitech" : "Edward"

    }
];
console.log($scope.projetsListe);

 $scope.progressBar= function(i){   
        var tpa;
        var p1 = document.getElementById('pg'+i);
        var p2 = document.getElementById('pgb'+i);
        var l1 = document.getElementById('l'+i);

        tpa = ($scope.tpasse[i]*100)/$scope.tprev[i];
           if(tpa<=100){
             p1.style.width =  tpa + '%';
             p2.style.width =  100-tpa + '%';
             l1.innerHTML = " ";
           }
           else{
             p1.style.width = '100' +'%';   
             l1.innerHTML = "Attention : You have reached the limits!";
           }  
 };
});


<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="Ctrl">

    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Nom</th>
          <th>Responsable</th>
          <th>Progress</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="p in projetsListe track by $index">
          <td>{{p.NomProjet}}</td>
          <td>{{p.ResponsableApitech}}</td>
          <td>
            <div class="progress" ng-init="{{progressBar($index)}}">
              <div class="progress-bar progress-bar-danger " role="progressbar" aria-valuenow="40" id="pg{{$index}}" aria-valuemin="0" aria-valuemax="100">
                <label id="l{{$index}}"></label>
              </div>
              <div class="progress-bar progress-bar-success progress-bar-striped " role="progressbar" aria-valuenow="40" id="pgb{{$index}}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <label style="font-size :10px"><i class="fa fa-circle" style="color : #df6d69"></i> Temps Passé : {{tpasse[$index]}}h</label> &nbsp; &nbsp;
            <label style="font-size :10px"><i class="fa fa-circle" style="color : green"></i> Temps Prévu : {{tprev[$index]}}h</label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Updated Plunker

希望有所帮助：）

答案 1 :(得分：1)

我知道，您已经接受了答案，但我仍然建议您使用components方法（因为您使用的是angularjs 1.5+）来解决您的问题。您的代码中有一些看起来不太好的东西：ngInit会在模板中添加不必要的逻辑，您可以避免使用它，因为组件具有明确定义的生命周期，您可以使用$onChanges钩子重新绘制进度条。在控制器内操作DOM也不是处理视图的角度方式，最好在你的情况下使用ngStyle directive。这是一个有效的例子：

＆＃13;
＆＃13; 
angular.module('myApp', []).controller('Ctrl', function ($scope) {
 $scope.projetsListe = [
    {
      NomProjet : "Project1",
      ResponsableApitech : "Jean",
      tpasse: 5049,
      tprev: 688
    }, {
      NomProjet : "Project2", 
      ResponsableApitech : "Edward",
      tpasse: 26,
      tprev: 336
    }, {
      NomProjet : "Project4", 
      ResponsableApitech : "Edward",
      tpasse: 177,
      tprev: 336
    }
  ];
})
.component('progressBar', {
  templateUrl: "progress-bar.html",
  bindings: {
    project: '<'
  },
  controller: 'ProgressBarCtrl'
})
.controller('ProgressBarCtrl', [function ProgressBarCtrl (){
  var ctrl = this;
  
  ctrl.$onChanges = onChanges;

  ctrl.styles = {};
  
  function onChanges(changesObject){
    ctrl.styles = getStyles(ctrl.project);
  }
  
  function getStyles(project){
      var tpa, styles = {};
      tpa = (project.tpasse*100) / project.tprev;
 
      if (tpa <= 100){
        styles = {
          p1Width: tpa + '%',
          p2Width: 100-tpa + '%',
          l1innerHTML: " "
        };
      } else{
        styles = {
          p1Width: '100%',
          l1innerHTML: "Attention : You have reached the limits!"
        };
      } 
      
     return styles;
  }
  
  return ctrl;
  
}]);
＆＃13; 
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
</head>

<body>
  <div ng-controller="Ctrl">
  
  <table class="table table-bordered table-hover table-striped">
     <thead>
      <tr>
        <th>Name</th>
        <th>Responsable</th>
        <th>Progress</th>
      </tr>
    </thead>
    <tbody>
     <tr ng-repeat="p in projetsListe">
       <td>{{p.NomProjet}}</td>
       <td>{{p.ResponsableApitech}}</td>
       <td>
         <progress-bar project="p"></progress-bar>
       </td>
      </tr>
    </tbody>
  </table>

<script type="text/ng-template" id="progress-bar.html">
<div class="progress">
    <div class="progress-bar progress-bar-danger" ng-style="{'width': $ctrl.styles.p1Width}" role="progressbar"
         aria-valuenow="40" aria-valuemin="0"
         aria-valuemax="100">
        <label>{{$ctrl.styles.l1innerHTML}}</label>
    </div>
    <div class="progress-bar progress-bar-success progress-bar-striped" ng-style="{'width': $ctrl.styles.p2Width}"
         role="progressbar" aria-valuenow="40"
         aria-valuemin="0" aria-valuemax="100"></div>
</div>

<label style="font-size :10px"><i class="fa fa-circle" style="color : #df6d69"></i> The actual Time spent :
    {{$ctrl.project.tpasse}}h</label>
&nbsp; &nbsp;
<label style="font-size :10px"><i class="fa fa-circle" style="color : green"></i> The Initial expected time :
    {{$ctrl.project.tprev}}h</label>
</script>

</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题