个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 21:04:51 26 4
gpt4 key购买 nike

我正在尝试更改表格中每一行的进度条内容。为此，我在 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

最佳答案

cod 的主要问题是不同的元素有相同的 id。这是不允许的，所以只有你的进度条没有正常出现。以下是解决您的问题的代码。但我建议的是，您的代码还有其他问题，例如，您正在使用 ng-init={{}progressBar($index)} 进行插值，但这会引发错误 progressBar 什么都不返回。我认为您需要正确检查代码。 

// 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

希望对您有所帮助:)

关于javascript - 在 ng-repeat 中使用 ng-init 调用函数只会得到循环中最后一项的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44517814/

26 4 0
文章推荐： javascript - 如何在内联 <script> 中访问捆绑的 ES6 类
文章推荐： Android 应用程序在扫描 iBeacons 的后台服务上非常不稳定
文章推荐： java - setImageResource() 问题 - 如何实现文件路径？
文章推荐： android - 如何在 android 中从 omxcodec 转储 yuv 缓冲区
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com