Ich habe eine onClick angularjs Funktion hat eine for-Schleife, die nicht funktioniert beim ersten Klick

Ich habe eine onClick angularjs Funktion einige Bindung und hat eine for-Schleife. Mein Problem ist, dass die for-Schleife beim ersten Klick nicht funktioniert. aber in der Sekunde ist es in Ordnung. wie kann ich es reparieren? In meiner App habe ich ein Array von Studenten Vorname = fname, Nachname = lname und Unterricht. Ich möchte, wenn ich auf den Namen des Schülers klicke, zeige das Programm den vollen Namen der Schüler und die Liste seiner Unterrichtsstunden.Ich habe eine onClick angularjs Funktion hat eine for-Schleife, die nicht funktioniert beim ersten Klick

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>"); 
      } 

     }

Quelle

2016-09-05 Mina Ghorbani

Warum Sie verwenden 'ng-cloak' in jeder Schleife? Es sollte von dort entfernt werden und dann erneut versuchen. Wenn Sie einen Konsolenfehler bekommen, lassen Sie es uns bitte wissen :) – Vineet

Eine andere Sache, die Sie vergessen haben, ']' am Ende des 'stdNames' Arrays zu verwenden. – Vineet

Erstellen Sie keine ** Vorlage ** im Controller-Code mit 'jquery'. Sehen Sie sich 'ng-repeat' an –

ich eine Beispiel-App mit Ihrem Beispiel erstellt haben. Es funktioniert hier gut, zum ersten Mal wird der Klick initialisiert. Überprüfen Sie die folgenden Punkte.

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>

Quelle

2016-09-05 06:08:56

Ich habe eine onClick angularjs Funktion hat eine for-Schleife, die nicht funktioniert beim ersten Klick

Antwort

Verwandte Themen