I got a problem when I try to access a function button from a looped list. My html looks like this:
<div data-ng-app="HorseApp">
<div data-ng-controller="HorseCtrl">
<form>
<div id="conReqSend" class="cont-c" ng-init="getRequest()">
<h4 id="cmgLbl">Skicka förfrågan</h4>
<div id="boxInCMG">
<div id="CMGbtn">
<br />
<b>Mottagna</b> <input type="radio" name="type" ng-model="Type" value="to" checked="true">
<b>Skickade</b> <input type="radio" name="type" ng-model="Type" value="from" >
<br />
<input type="button" value="Hämta" data-ng-click="getRequest()" />
<input type="button" value="Skicka ny" data-ng-click="goToPage('reqHorseCon')" />
</div>
<div id="respond" class="cont-c" ></div>
</div>
</form>
</div>
</div>
the I got my angularJS:
var HorseApp = angular.module('HorseApp', ['angularLocalStorage']);
HorseApp.controller('HorseCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout , storage)
{
$scope.Type = 'to';
$scope.getRequest = function () {
var token = localStorage.getItem('token');
var id = localStorage.getItem('ID');
var datainput =
({
id: id,
type: $scope.Type,
read: 'all'
});
$http({
method: 'POST',
url: 'http://localhost:8908/api/horse/req',
data: datainput,
contentType: 'application/JSON',
headers: {'Authorization': 'Bearer ' + token}
})
.success(function (data) {
var respond = document.getElementById("respond");
respond.innerHTML = '';
var loopData = '';
var length = data.length;
if($scope.Type == 'to')
{
for (var i = 0; i < length; i++)
{
var x = data[i].id;
loopData += '<label>Häst id ' + data[i].horseID + '</label> <label>Från id '+ data[i].userIDFrom + '</label> <input type="button" value="Accept" data-ng-click="accept(' +"'" + x + "')" + '"/> < <br />';
}
}
else if($scope.Type == 'from')
{
for (var i = 0; i < length; i++)
{
loopData += '<label>Häst id ' + data[i].horseID + '</label> <label>Från id '+ data[i].userIDFrom + '</label> <label> Ta bort</label> <br />';
}
}
respond.innerHTML = loopData;
})
.error(function (error) {
});
},
$scope.accept = function (id) {
var token = localStorage.getItem('token');
var datainput =
({
id: id,
type: 'accept'
});
$http({
method: 'POST',
url: 'http://localhost:8908/api/horse/connect',
data: datainput,
contentType: 'application/JSON',
headers: {'Authorization': 'Bearer ' + token}
})
.success(function (data) {
})
.error(function (error) {
});
},
$scope.goToPage = function (page) {
window.open('../www/' + page +'.html', 'content');
}
}]);
My problem is that Accept button from the loop don't run the accept function at all. I'm kind of new to AngularJS and maybe I'm doing this whole thing in the wrong way.
[Solved code]
fix to the html (still don't get why I need both id,name)
<div id="respond" class="cont-c" >
<ul>
<li ng-repeat="(id,name) in items"> --- {{name.date}} --- {{name.horseID}}<input type="button" value="Godkänn" data-ng-click="accept(name.id)"/></li>
</ul>
</div>
and the fixed angular part:
$scope.items = {}; //top of controller
//in $http call
.success(function (data) {
var reqList = [];
var length = data.length;
for (var i = 0; i < length; i++)
{
var reqData = {id: data[i].id, date: data[i].date, horseID: data[i].horseID }
reqList.push(reqData);
}
$scope.items = reqList;
'; – ewil Nov 04 '15 at 17:58