如何通过角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

回答

相关问题