Get value from outside ng-repeat in angular - javascript

How can i get a value from outside an ng-repeat?
This is my function to get values from json
function($scope, $http) {
$http.get('https://www.mywebsite.com/images/getimages.php').
success(function(data, status, headers, config) {
$scope.walls = data.walls;
console.log($scope.walls);
}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
then i have a table:
<tr ng-repeat="wall in walls">
<td>{{wall.id}}</td>
<td>{{wall.link}}</td>
</tr>
i would show in a div outside the table and so outside the ng-repeat, the {{wall.link}} selected from the td. How can i do it?

You can implement controller function to set selected wall object:
function ($scope, $http) {
$http.get('https://www.mywebsite.com/images/getimages.php')
.success(function (data, status, headers, config) { /*...*/ })
.error(function (data, status, headers, config) { /*...*/ });
$scope.select = function (wall) {
$scope.selectedWall = wall;
};
}
and the in HTML you would use
<table>
<tr ng-repeat="wall in walls">
<td>{{wall.id}}</td>
<td>
{{wall.link}}
</td>
</tr>
</table>
<div>{{selectedWall.link}}</div>

Related

Create a custom http service that will request external JSON file. pure angularjs only

I have a http service which will call external json files and load it into a grid.
My problem is i need to create a custom http service so that i could use the same in different controllers. The function of that custom service should be the same (requesting external Json file)
$http.get('../JSON/permanentEmployees.json').
success(function(data, status, headers, config) {
$scope.masterArray = data;
}).
error(function(data, status, headers, config) {
$scope.errorMessage = "Requested grid data file does not exist";
});
This is my current http service. Any help would be appreciated.Please use angularjs only
wrap the code in a factory and use it. I think its better to use a factory in this situation, refer here. P.S. unable to create a mockup of the request to JSON, please check with your JSON.
JSFiddle: here
app.factory('customHTTPService', function($http){
return {
getRequest: function(url) {
return $http.get(url).
success(function(data, status, headers, config) {
return {data: data, errorMessage: "Success"};
}).
error(function(data, status, headers, config) {
return {data: "", errorMessage: "Requested grid data file does not exist"};
});
}
}
});
In the controller you can do
app.controller('MyController', function MyController($scope, customHTTPService) {
$scope.data = customHTTPService.getRequest('../JSON/permanentEmployees.json').data;
});

How to pass or fetch data from AngularJS to Aspx using WebMethod?

I have to fetch a string from aspx to angularJS and display it. But I am not getting any response or it might be AngularJS is not triggering the method.
Here is my Angular Controller
controller('ReadTextController', function ($scope, $http, $location) {
$scope.showData = function () {
$http.post('KeyPhraseGroup.aspx/GetEmployees', { data: {} })
.success(function (data, status, headers, config) {
$scope.result = data.d;
})
.error(function (data, status, headers, config) {
$scope.status = status;
});
}
});
And here is my aspxmethod
[WebMethod]
public static string GetEmployees()
{
return "Hello World";
}
I am triggering the showData() method of the AngularJS controller in my html page but not getting the string fetched.
Changed Explanation
I am getting value as undefined

Call function inside ng-repeat to retrieve value

I'm having this situation I'm iterating over a json response from an endpoint:
chunk of controller code:
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
$scope.stores = data;
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
and on my html view side I've got this:
<tbody>
<tr ng-repeat="store in stores">
<td>{{store.name}}</td>
<td> {{store.type}} </td>
<td><span ng-repeat="client in retrieveClientName(store.client_id)">
{{client.name}}
</span>
</td>
<td>{{store.address}}</td>
</tr>
</tbody>
As you can see I'm trying to retrieve the client name using a function that receives an store.client_id from the values inside the stores array. Normally using a function triggered by a ng-click will be easy but how can I achieve this "on the fly" while I'm iterating?.
Because executing this I get a kind of infinite loop that breaks all apart.
here is the code of the function that returns client name on the controller side:
$scope.retrieveClientName = function(id) {
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/clients?client_id='+id
}).
success(function(data, status, headers, config) {
return $scope.clients=data;
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
}
I have also try using mg-init directive
<td ng-init="clients=retrieveClientName(store.client_id)"><span ng-repeat="client in clients">{{client.name}}</span></td>
One way would be get all data when you get the stores back
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
$scope.stores = data;
angular.forEach($scope.stores, function(store){
$scope.retrieveClientName(store.client_id).then(function(clients){
store.clients = clients;
});
});
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
Edit: I would change the structure a bit for cleaner code
$scope.retrieveClientName = function(store) { // pass in store so we can attach results here
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/clients?client_id='+store.client_id
}).
success(function(data, status, headers, config) {
return store.clients = data; // attach result in object
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
}
$http({
method: 'GET',
url: 'http://mywebsite.com/api/v1/stores/'
}).
success(function(data, status, headers, config) {
$scope.stores = data;
angular.forEach($scope.stores, function(store){
$scope.retrieveClientName(store); // no need .then here
});
}).
error(function(data, status, headers, config) {
$scope.name = 'Error!';
});
<tbody>
<tr ng-repeat="store in stores">
<td>{{store.name}}</td>
<td> {{store.type}} </td>
<td><span ng-repeat="client in store.clients"> <!-- use data here -->
{{client.name}}
</span>
</td>
<td>{{store.address}}</td>
</tr>
</tbody
You must understand that $http jest asynchronous, so Your response will be back after all ng-repeat, so such thing must be done in controller in $q.all and after that render view with ng-repeat.
So do foreach on stores and in foreach add to array, next use this array in $q.all, after $q.all render view.
The retrieveClientName function is wrong: the $http return a promise, the return value of success callback is not the return value of the function and you can't bind the ng-repeat to a promise, try this one:
$scope.retrieveClientName = function(id) {
return $resource('http://mywebsite.com/api/v1/clients?client_id='+id).query();
}
Don't forget to include the ngResource dependency.

TypeError: (intermediate value)(intermediate value).success is not a function (angular)

I have difficulties understanding this error... I dont quite understand why its not a function....
angular.module('mkApp').factory('mkService', function ($http, $log) {
function getLookUp(successcb) {
$http = ({
method: 'GET',
url: 'api/Entries/'
}).success(function (data, status, header, config) {
successcb(data);
}).
error(function (data, status, header, config) {
$log, warn(data, status, header, config);
});
};
return {
lookUp: getLookUp
}
});
angular.module('mkApp').controller('mkControler', function ($scope, mkService) {
mkService.lookUp(function (data) {
$scope.ddl = data;
console.log(ddl);
});
});
And here is my HTML
<div ng-app="mkApp">
<div ng-controller="mkControler">
<table>
<tr>
<td> First Name</td>
<td> Last Name</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
My idea is to use data to populate drop down. It does bring me XML back.
Any help please i've been looking everywhere now.
Thank you.
Your $http call code should be $http({ instead of $http = ({ and also $log, warn should be $log.warn
Code
$http({
method: 'GET',
url: 'api/Entries/'
}).success(function (data, status, header, config) {
successcb(data);
}).
error(function (data, status, header, config) {
$log.warn(data, status, header, config);
});

Why Angularjs continuously call method when send a get request?

I am new in angularjs. I am try to send a get request to my Web-Api 2 project. But I don't understand why its continuously call my method. I am following AngularJs $http for this.
Here is my error:
My Code is :
<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script>
function loginCtrl($scope, $http) {
$scope.name = function () {
console.log("Add Call");
$http({ method: 'GET', url: 'http://localhost:15229/api/values' }).
success(function (data, status, headers, config) {
console.log(data);
}).
error(function (data, status, headers, config) {
console.log(data);
});
};
}
</script>
<div lang="en" ng-app="" ng-controller="loginCtrl">
{{name()}}
</div>
You don't give enough context information for me to be sure of what you want to achieve. Especially I don't know what returns your api. So I will assume It returns the value you want to display. Your code should look more like this:
function loginCtrl($scope, $http) {
$scope.init = function () {
console.log("Add Call");
$http({ method: 'GET', url: 'http://localhost:15229/api/values' }).
success(function (data, status, headers, config) {
console.log(data);
$scope.name = data;
}).
error(function (data, status, headers, config) {
console.log(data);
});
};
}
<div lang="en" ng-app="" ng-controller="loginCtrl" ng-init="init()">
{{name}}
</div>
You should affect $scope.name in the success callback.
name should be a variable, not a function.
And the ng-init attributes defines the method to be invoked when instanciating the controller. In this case it will invoke the init() method of your controller.

Categories