asked on

Passing variable to function in Angular JS

I want to call a function in the controller file that should in turn call the API and delete a post

If I replace the bold bit in the code '{{user.id}}' with a static number, it works fine - when I try different ways of including it - any of these below, I get errors, most of the time it just passed the code as text

ng-click="deleteUser('{{user.id}}')"

Gives me a source as =
<button class="btn btn-small btn-purple" ng-click="deleteUser('580')" style="margin:0 0 2px 0; font-weight:bold;">DELETE</button>

And that should work as this static code
ng-click="deleteUser('580')"

Works fine

HTML:
<button class="btn btn-small btn-purple" ng-click="deleteUser('{{user.id}}')" style="margin:0 0 2px 0; font-weight:bold;">DELETE</button>

controller.js:

$scope.deleteUser = function(userId) {
			$http({
		    method: 'DELETE',
		    url: '/user/delete/' + userId,
		    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		    transformRequest: function(obj) {
		        var str = [];
		        for(var p in obj)
		        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
		        return str.join("&");
		    }
		})
		.success(function () {
			refreshUserList();
		})
		
		.error(function() {
		});

Open in new window

What can be wrong, for some reason when I'm entering the dynamic variable, even though the source is fine, identical to the static working source, when debugging I'm receiving this

curl 'http://URL:8080/user/delete/%7B%7Buser.id%7D%7D' -X DELETE -H 'Host: URL:8080' -H 'User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0' -H 'Accept: application/json, text/plain, */*' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate' -H 'Referer: http://URL:8080/admin/viewCustomers.php' -H 'Cookie: JSESSIONID=8144C37C60F584EBBEB9EC5131F0301D'

curl 'http://URL:8080/user/delete/%7B%7Buser.id%7D%7D' - as you can see it distorts it - not when I'm sending static, but only when the dynamic is passed - even though the source says the same... very confused.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

<div ng-app="myApp" ng-controller="myCtrl">
    <button class="btn btn-small btn-purple" ng-click="deleteUser(user.id)" style="margin:0 0 2px 0; font-weight:bold;">DELETE</button>
</div>

Open in new window

var myApp = angular.module("myApp", []);
var myCtrl = myApp.controller("myCtrl", function($scope,$http) {
    $scope.user = {
        id: 580
    };

    $scope.deleteUser = function(userId) {
        alert(userId);
			$http({
		    method: 'DELETE',
		    url: '/user/delete/' + userId,
		    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		    transformRequest: function(obj) {
		        var str = [];
		        for(var p in obj)
		        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
		        return str.join("&");
		    }
		})
		.success(function () {
			refreshUserList();
		})
		
		.error(function() {
		});
    };
});

Open in new window