如何通過角JS

-2

HTML查看陣列循環如何通過角JS

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

模型和控制器

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

現在輸出「嗨名稱1」這裏命名1可點擊的，當它被點擊時名字2被顯示。直到名字5被顯示。但我需要循環它。當單擊名稱5時，應再次顯示名稱1。

我的英語不好。請幫忙。 View it in Plunker

來源

2017-03-09 codieboie

請加註運動員 –

@RIYAJKHAN我在說明中加入了plunker鏈接器 – codieboie

數組在哪裏？ – Claies

試試這個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(); 
});

來源

2017-03-09 05:31:28

對不起，我可以得到一個全局代碼。如果我將名稱1替換爲「abc」，將名稱2替換爲「def」等。有沒有解決方案來完成這項工作？ – codieboie

是的，看看更新的答案。 –

試試這個，首先你定義一個數組你需要的值，並創建您的角函數內部條件語句

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>

來源

2017-03-09 05:37:10 nivas

試試這個

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();

來源

2017-03-09 05:46:05

如何通過角JS

回答

相關問題