我有一个onClick angularjs函数有一个for循环，在第一次点击不工作

I have an onClick angularjs function has a for loop that does not work in first click

本文关键字：有一个 第一次 工作 循环 angularjs onClick 函数 for      更新时间：2023-09-26

我有一个onClick angularjs函数做一些绑定和有一个for循环。我的问题是，for循环不工作在第一次点击。但在第二，它是好的。我该怎么修理它?在我的应用程序中，我有一个学生数组，firstname= fname, lastname=lname，和tuition。我想当我点击学生的名字，程序显示学生的全名，和他或她的学费列表。

HTML: 

    <li ng-repeat="x in stdNames" class="text-center">
        <a ng-cloak ng-click="showStuInfo($index)" href="#stu-info">{{ x.fname + ' ' + x.lname}}</a>                    
    </li>
    //result box (in another page - loading by router )
    <section class="stuInfoBox clear">
        <div class="nameRow clear">
            <p class="text-right pull-right">Name</p><p class="text-right pull-right stu-fullname" ng-bind="studentName"></p>
        </div>
        <div class="tuitionsRow clear">
            <ul class="stuTuitionList">
            </ul>
        </div>
    </section>

JavaScript (AngularJS Controller):

     //Students array
     $scope.stdNames = [
            { stuId: "s01", fname: 'Mina', lname: 'Ghorbani', tuitions:['Javascript Programming','AngularJs','JQuery','C# Programming']};
   //onclick function
    $scope.showStuInfo = function (index) {
            $(".stuTuitionList li").remove();
            $scope.studentName = $scope.stdNames[index].fname + " " + $scope.stdNames[index].lname;
            var tuitionsLength = $scope.stdNames[index].tuitions.length;
            for (var i = 0; i < tuitionsLength; i++) {
                $(".stuTuitionList").append("<li>"+$scope.stdNames[index].tuitions[i]+"</li>");
            }
        }

我用你的例子创建了一个示例应用程序。它在这里工作得很好，第一次点击被初始化。

var app = angular.module('sample', []);
app.controller('samplecontroller', function($scope) {
  //Students array
  $scope.stdNames = [{
    stuId: "s01",
    fname: 'Mina',
    lname: 'Ghorbani',
    tuitions: ['Javascript Programming', 'AngularJs', 'JQuery', 'C# Programming']
  }];
  //onclick function
  $scope.showStuInfo = function(index) {
    $(".stuTuitionList li").remove();
    $scope.studentName = $scope.stdNames[index].fname + " " + $scope.stdNames[index].lname;
    var tuitionsLength = $scope.stdNames[index].tuitions.length;
    for (var i = 0; i < tuitionsLength; i++) {
      $(".stuTuitionList").append("<li>" + $scope.stdNames[index].tuitions[i] + "</li>");
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">
  <div ng-controller="samplecontroller">
    <li ng-repeat="x in stdNames" class="text-center">
      <a ng-cloak ng-click="showStuInfo($index)" href="#stu-info">{{ x.fname + ' ' + x.lname}}</a> 
    </li>
    //result box (in another page - loading by router )
    <section class="stuInfoBox clear">
      <div class="nameRow clear">
        <p class="text-right pull-right">Name</p>
        <p class="text-right pull-right stu-fullname" ng-bind="studentName"></p>
      </div>
      <div class="tuitionsRow clear">
        <ul class="stuTuitionList">
        </ul>
      </div>
    </section>
  </div>
</body>

相关文章：