我正在尝试更改表格中每一行的进度条内容。为此，我在 ng-repeat 中使用了 ng-init 这是我的代码:
View :
<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>
   
<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é !";
}
};
结果中我只获取表格最后一行的数据，它出现在第一行:
这个结果应该出现在现在为空的第二行中，而第一行应该有不同的结果。关于如何解决这个问题有什么建议吗？
这是一个说明此问题的插件:https://plnkr.co/edit/nGxqMOPejKMINb89Ewwx?p=preview
最佳答案
cod 的主要问题是不同元素具有相同的 id。这是不允许的，所以只有你的进度条没有正常显示。下面是解决您的问题的代码。但我建议您的代码还存在其他问题，例如您正在使用 ng-init={{}progressBar($index)} 进行插值，但这会引发错误 进度条不返回任何内容。我认为你需要正确审查你的代码。
// 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>
<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>
希望有帮助:)
关于javascript - 在 ng-repeat 中使用 ng-init 调用函数只能获取循环中最后一项的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44517814/