I am trying to display four buttons, which is the amount of rows in my test database. I successfully grabbed the data from the database, parsed the JSON and stored it into 3 arrays, idStore, firstStore, and lastStore. Lets say we have in idStore [1,2,3,4] firstName [f1, f2, f3, f4] and lastName [l1,l2,l3,l4]. I want to display four buttons like this:
1 f1 l1
2 f2 l2
3 f3 l3
4 f4 l4
Right now, I found another answer on here that helped me get the amount of buttons on the page dynamically equal to idStore.length (so it creates four buttons on index.html). The problem is I don't know how to change the button text using angular. I tried getting the text to be displayed using $scope.names, but it is just a blank button with a comma in the middle. I want the button text to be my data right as they are created. I know my information is fine, because onButtonClicked successfully displays the data for the specified index in the console log.
displaydata.js
myApp.controller('AppCtrl' , function($scope){
$scope.number = idStore.length;
$scope.getArray = function(num){
var array = [];
for(var i = 0 ; i < num;i++){
array[i] = i +1;
}
return array;
}
$scope.names = function(){
for(var i = 0; i < idStore.length; i++)
{
[{first:firstStore[i], last:lastStore[i]}]
}
}
$scope.getButtonClicked = function(buttonNumber){
console.log(idStore[buttonNumber] + " " + firstStore[buttonNumber] + " " + lastStore[buttonNumber]);
}
});
index.html
<body ng-controller="myController">
<div ng-app="app">
<div ng-controller="AppCtrl">
<button ng-repeat="n in getArray(number)" id="button-{{$index}}" ng-click="getButtonClicked($index)" >{{names.first}},{{names.last}}</button>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire