0

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;
Jon Hanna
  • 110,372
  • 10
  • 146
  • 251
ewil
  • 1
  • 1
  • where is the button that is calling `accept` in this code? you have an `ng-init` and an `ng-click` that are both calling `getRequest`. – Claies Nov 04 '15 at 17:56
  • as a side note, this isn't a good place to use `ng-init`, especially given that the function that is being called by `ng-init` is an async function. you will experience odd behaviors with this. – Claies Nov 04 '15 at 17:57
  • its in the loop loopData += ' <
    ';
    – ewil Nov 04 '15 at 17:58
  • 1
    oh, I see what you are trying to do now... yeah, no, don't do that. put your data into a variable and use `ng-repeat`, don't assign HTML to the DOM from your javascript. Angular has no way of knowing that you added those elements, and can't respond to them. – Claies Nov 04 '15 at 18:00
  • see http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 – Claies Nov 04 '15 at 18:00
  • Thanks allot! after some hair pull and frustration I got it to work – ewil Nov 04 '15 at 21:27

0 Answers0