2017-03-09 9 views
-2

HTML-AnsichtWie in Angular js

<div ng-app="myApp" ng-controller="myCtrl"> 
    Hi <span ng-click="changeName()" style="cursor: pointer;">{{firstname}}</span> 
    </div> 

Modell und Controller-

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.firstname = "Name 1"; 
    $scope.changeName = function() { 
     $scope.firstname = "Name 2"; 
    $scope.changeName = function() { 
     $scope.firstname = "Name 3"; 
    $scope.changeName = function() { 
     $scope.firstname = "Name 4"; 
     $scope.changeName = function() { 
     $scope.firstname = "Name 5"; 
    } 
     } 
} 
} 
}); 

Jetzt ist die Ausgabe "Hallo Name 1" Hier Name 1 durch ein Array-Schleife klickbar, wenn geklickt wird Name 2 wird angezeigt..so wie das bis Name 5. Aber ich muss es Schleife. Wenn Name 5 angeklickt wird, sollte Name 1 erneut angezeigt werden.

Ich bin schlecht in Englisch. Bitte helfen Sie. View it in Plunker

+0

Bitte hinzufügen plunker –

+0

@RIYAJKHAN Ich habe Plunker Linker in Beschreibung hinzugefügt – codieboie

+0

wo ist das Array? – Claies

Antwort

1

Versuchen Sie, diese solution:

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    var names = ['a', 'b', 'c']; 
    var counter = 0; 
    $scope.changeName = function(){ 
     $scope.firstname = names[counter++ % names.length]; 
    } 
    $scope.changeName(); 
}); 
+0

Sorry, kann ich einen globalen Code bekommen. Wenn ich Name 1 zu "abc" und Name 2 zu "def" ersetze, usw. Gibt es eine Lösung, damit dies funktioniert? – codieboie

+0

Ja, schau dir die aktualisierte Antwort an. –

1

dieses Versuchen Sie zunächst ein Array mit Ihren erforderlichen Werte definieren und eine bedingte Anweisung in Ihrer Winkelfunktion

var app = angular.module('myApp', []); 
 

 
app.controller('MainCtrl', function ($scope) { 
 
    $scope.nameArray = ['Name 1', 'Name 2', 'Name 3', 'Name 4', 'Name 5']; 
 
    $scope.firstname = "Name 1"; 
 
    var i = 1; 
 
    $scope.changeName = function() { 
 
    debugger; 
 
    if (i < $scope.nameArray.length) { 
 
     $scope.firstname = $scope.nameArray[i]; 
 
     i++; 
 
    } else { 
 
     i = 0; 
 
     $scope.firstname = $scope.nameArray[i]; 
 
    } 
 
    } 
 
})
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
    <head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
 
    </head> 
 
    <body ng-controller="MainCtrl"> 
 
    
 
    Hi <span ng-click="changeName()" style="cursor: pointer;">{{firstname}}</span> 
 
    </body> 
 
</html>

0
erstellen

versuchen Sie dies

var arrayIndex = 0; 
var arrayNames = ['name1','name2', 'name3', 'name4', 'name5']; 
$scope.changeName = function() { 
    $scope.firstname = arrayNames[arrayIndex]; 
    arrayIndex = arrayIndex+1>=arrayNames.length?0:arrayIndex+1; 
}; 
$scope.changeName();