AngularJS：ボタンをクリックしてアレイ全体を繰り返します。

ダンプのおかげで申し訳ありませんが、AngularJSとJavaScriptを初めて使用しています。ボタンをクリックしてコレクションを繰り返していきたいと思います。AngularJS：ボタンをクリックしてアレイ全体を繰り返します。

<body ng-init="customers = [ 
{'name':'John', 'city':'Doe'}, 
{'name':'Anna', 'city':'Smith'}, 
{'name':'Peter', 'city':'Jones'} 
]"> 


<div class="container" ng-app="myApp" ng-controller="myCtrl" > 
    <div class="span12"> 
     <h1>{{name}}</h1> 
     <br/> 
     <p>{{city}}</p> 


     <button type="button" name="button" value="Next" ng-click="makeIterator($scope.customers)"></button> 
    </div> 
</div>

のでNextボタンをクリックした後、私は表示されたお客さまの次の反復を見たいのですが。どうすれば作れるの？ボタンをクリックすると

出典

2016-08-08 Rudziankoŭ

だけ変数あるCurrentUserを作成し、次の変数に値を更新します。また、ビュー全体にJSON全体を置くという悪い習慣 – Rajesh

次回の顧客の反復はどういう意味ですか？ –

あなたはインデックスを格納し、それをインクリメントすることができます

<body ng-app="myApp"> 
<div class="container" ng-controller="myCtrl" > 
    <div class="span12"> 
     <h1>{{customers[currentCustomerIdx].name}}</h1> 
     <br/> 
     <p>{{customers[currentCustomerIdx].city}}</p> 


    <button type="button" name="button" value="Next" 
      ng-click="index = (index + 1) % customers.length"></button> 
</div>

<script> 
angular.module('myApp', []) 
.controller('myCtrl', function ($scope) { 
    $scope.customers = [ 
    {'name':'John', 'city':'Doe'}, 
    {'name':'Anna', 'city':'Smith'}, 
    {'name':'Peter', 'city':'Jones'}]; 
    $scope.currentCustomerIdx = 0; 
    }); 
</script>

出典

2016-08-08 09:54:04

お返事ありがとうございます！私は方法を知らないが、それは私のために動作しません –

あなたはエラーがありますか？顧客は表示されませんか？ –

https://codepen.io/Siarzuk/pen/WxYRNV –

PFBのアプローチは、それを行うには：

<body> 

<div class="container" ng-app="myApp" ng-controller="myCtrl"> 
<div class="span12"> 
    <h1>{{customers[counter].name}}</h1> 
    <br/> 
    <p>{{customers[counter].city}}</p> 


    <button type="button" name="button" value="Next" ng-click="iterate();">NEXT</button> 
</div> 
</div> 
    <script> 
var app = angular.module("myApp", []); 
app.controller('myCtrl', function($scope) { 
$scope.customers = [ 
{'name':'John', 'city':'Doe'}, 
{'name':'Anna', 'city':'Smith'}, 
{'name':'Peter', 'city':'Jones'} 
] 
$scope.counter=0; 
$scope.maxCount = $scope.customers.length - 1; 
$scope.iterate = function(){ 
if($scope.counter == $scope.maxCount) 
{ 
$scope.counter=0; 
} 
else{ 
$scope.counter++; 
} 
} 
}); 
</script> 
</body>

出典

2016-08-08 10:12:04

あなたは、インデックスを格納することができますボタンのクリックイベントをバインドして顧客配列を反復処理し、そのインデックスを使用して顧客を顧客アレイから引き離す。

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController); 
 
    
 
    function DefaultController() { 
 
    var vm = this; 
 
    vm.index = 0; 
 
    vm.customers = customers; 
 
    vm.customer = vm.customers[vm.index]; 
 
    vm.nextCustomer = nextCustomer; 
 
    
 
    function nextCustomer() { 
 
     vm.index = vm.index + 1; 
 
     if (vm.index === vm.customers.length) { 
 
     \t vm.index = 0; 
 
     } 
 
     
 
    \t vm.customer = vm.customers[vm.index]; 
 
    } 
 
    } 
 
    
 
    var customers = [ 
 
    { name: 'Name 1', city: 'City 1' }, 
 
    { name: 'Name 2', city: 'City 2' }, 
 
    { name: 'Name 3', city: 'City 3' }, 
 
    ];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as ctrl"> 
 
    <div> 
 
     <span>Customer: </span>{{ctrl.customer.name}} 
 
    </div> 
 
    
 
    <div> 
 
     <span>City: </span>{{ctrl.customer.city}} 
 
    </div> 
 
    
 
    <button type="button" ng-click="ctrl.nextCustomer()">Next</button> 
 
    </div> 
 
</div>

出典

2016-08-08 10:50:17

AngularJS：ボタンをクリックしてアレイ全体を繰り返します。

答えて

関連する問題