2017-03-09 11 views
-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" 클릭 할 때 클릭하면 이름 2가 표시됩니다. 이름 5까지 표시됩니다.하지만 반복해야합니다. 이름 5를 클릭하면 이름 1이 다시 표시됩니다.

영어로 나쁩니다. 도와주세요. View it in Plunker

+0

플 런커를 추가하십시오. –

+0

@RIYAJKHAN 설명에 플 런커 링커를 추가했습니다. – codieboie

+0

배열의 위치는 어디입니까? – Claies

답변

1

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

죄송합니다. 글로벌 코드를받을 수 있습니까? 이름 1을 "abc"로, 이름 2를 "def"로 바꿉니다. 이 작업을 수행 할 수있는 솔루션이 있습니까? – codieboie

+0

예, 업데이트 된 답변을 확인하십시오. –

1

이 시도하고 각 함수 내에서 조건문을 만들

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

시도해보기

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