Develop Reference

Running Angular Script on page Load

I have trouble with calling a function when the page loads. I'm not sure what tag I should use within html to run Angular application.
I am trying to pull user data from a database and display it in a table. It works when I use a button to call the function but I would like it to be more automated. I've done some research and it always leads me to using the controller but I am sure there has to be a simpler solution.
<tbody>
<Button ng-click="fetchEveryone();">click</Button>
<tr ng-repeat="user in all_users">
<td>
<img src="/images/{{user.pic}}" style="height: 50px; width: 50px; border-radius: 100px;"/>
</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>
<select ng-change="" ng-model="selectedMeeting">
<option value="">Select Meeting Type...</option>
<option ng-repeat="meeting in meetings">{{meeting}}</option>
</select>
</td>
<td>
<button>request</button>
</td>
</tr>
</tbody>
Here is the Angular code. It makes a request to python server.
$scope.fetchEveryone = function(){
var req = {
verb: 'getPeople',
names: $scope.Allusers
}
$scope.callAPI(req, function(response){
$scope.all_users = response;
$scope.view = 'viewPerson'
});
}

You can call it using ng-init as haakon319 suggested in this post. Otherwise, you can call it in your controller after the function definition and it will run when the controller loads:
function myController($scope){
$scope.callAPI = function(req, callback){
//some function
};
$scope.fetchEveryone = function(){
var req = {
verb: 'getPeople',
names: $scope.Allusers
}
$scope.callAPI(req, function(response){
$scope.all_users = response;
$scope.view = 'viewPerson'
});
};
$scope.fetchEveryone();
}
If you have more than one thing that needs to happen, better practice might be to have a dedicated init function to call all needed functions:
function myController($scope){
$scope.callAPI = function(req, callback){
//some function
};
$scope.fetchEveryone = function(){
var req = {
verb: 'getPeople',
names: $scope.Allusers
}
$scope.callAPI(req, function(response){
$scope.all_users = response;
$scope.view = 'viewPerson'
});
};
function moreBackendCalls(){
//more backend calls
};
function init(){
$scope.fetchEveryone();
moreBackendCalls();
//init some variables
$scope.test1 = 'new test';
$scope.test2 = 73;
}
init();
}
Alternatively, you can add the init to scope with:
$scope.init = function(){
.....
}
and add to your HTML in the following way:
<tbody ng-init="init()">
.......
</tbody>
It will then run when the route with that html is loaded.

Execute method in one of ng-repeat child

I'm using angular's ng-repeat to populate table with data from GitHub api and I want one of the <td> to execute method that will return data. the problem is that this makes the function execute infinitely.
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Languages</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos">
<td>{{repo.name}}</td>
<td></td> <!-- Get languages for each repo here. -->
</tr>
</tbody>
</table>
Angular:
(function(){
var app = angular.module("githubViewer", []);
var MainController = function($scope, $http){
var onUserComplete = function(response){
$scope.user = response.data;
$http.get($scope.user.repos_url)
.then(onRepoComplete, onError);
};
var onRepoComplete = function(response){
$scope.repos = response.data;
};
var onError = function(reson){
$scope.error = "Could not fetch the data";
};
//search for user
$scope.search = function(username){
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
};
// These two execute infinately if executed in the ng-repeat's <td>
$scope.findLangs = function(langsUrl){
$http.get(langsUrl)
.then(onLangComplete, onError);
}
var onLangComplete = function(response){
return response.data;
};
};
app.controller("MainController", ["$scope", "$http", MainController]);
})();
I've tried using {{ findLangs(repo.languages_url) }} in the <td> but it causes me to get this error:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
and appears to be infinitely executing.

I don't think you can use an expression there because you don't actually return a value from the findLangs() function. That said, I don't think that would cause an infinite loop. I think you'll need to actually grab the language data for each repo within the onRepoComplete callback, then just use that data in your template:
var onRepoComplete = function(response){
$scope.repos = response.data;
$scope.repos.forEach(function(repo) {
$http.get(repo.languages_url)
.then(function(response) {
// change this to process the language data however you need to...
repo.languages = JSON.stringify(response.data);
},onError);
});
};
Then in your template you can use the languages property of the repo:
<tr ng-repeat="repo in repos">
<td>{{repo.name}}</td>
<td>{{repo.languages}}</td>
</tr>

How to populate table in Angular with JSON data from a web Service?

I have a link that displays JSON data when first name is found.
http://localhost:8080/application/names/find?firstname=f_name&LastName&Address&Status=
For Example: If I replace f_name with Tim I get this JSON response.
[{"f_name": "Tim","address": "Road","phone": "1234","status": "busy"}]
If I replace f_name with Sue I get this JSON response.
[{"f_name": "Sue","address": "Street","phone": "4321", "status": "available"}]
I want to be able to type Tim or Sue and get corresponding data. Here is what I have.
$http.get('http://localhost:8080/application/names/find?firstname=f_name&LastName&Address&Status=').
success(function(data) {
$scope.jsonData = data;
alert("Success");
}).
error(function(data) {
alert("Invalid URL");
});
$scope.results = [];
$scope.clickButton = function(enteredValue) {
$scope.items = $scope.jsonData;
angular.forEach($scope.items, function (item) {
if(item.f_name === enteredValue){
$scope.results.push({
name: enteredValue,
address: item.address,
number: item.phone,
status: item.status
});
}
})};
jsp
<table>
<tr>
<td><label>Name:</label></td>
<td>
<input id="fName" type="text" data-ng-model="enteredValue" />
<button data-ng-click='clickButton(enteredValue)'>Search</button>
</td>
</tr>
</table>
<table>
<tr data-ng-repeat="result in results" >
<td data-title="'ID'" >{{result.name}}</td>
<td data-title="'Name'">{{result.status}}</td>
<td data-title="'Status'">{{result.number}}</td>
<td data-title="'Start Date'" >{{result.date}} </td>
</tr>
</table>
I have been able to populate the dropdown successfully using then such as below.
$http.get('http://localhost:8080/application/countries').then(function(cdata)
{
$scope.countryData = cdata.data;
})
How do I initiate this search? Am I doing this the right way? Do I have to have a service for this?

looks like your server side function already been able to handle the query and return filtered result, if that's the case, what you need to do is just to cope with the request url when you send the search result. so, your clickButton function should be something like this:
$scope.clickButton = function(enteredValue){
//you may want to change logic here if you got other parameter need to be handled
var url = 'http://localhost:8080/application/names/find?firstname='+enteredValue+'&LastName&Address&Status=';
$http.get(url).success(function(data){
$scope.results = data;
});
}

AngularJS detect which input has been changed

Data is retrieved in my AngularJS app via $http.get and rendered like this:
# Angular
app.controller('MainCtrl', function ($scope, $http) {
$scope.cart = {};
$scope.cart.retrieve = function() {
// make $http to retrieve data
.success(function(results) {
$scope.cart.contents = results
});
};
$scope.cart.update = function(itemId) {
// make $http request to update cart
}
});
# HTML
<table ng-init="cart.retrieve()">
<tbody>
<tr ng-repeat="item in cart.contents">
<td>{{ item.price }}</td>
// item quantity input field
<td><input type="number" name="quantity" on-change="cart.update(item.id)"
ng-model="item.qty"></td>
<td>{{ item.price * item.qty }}</td>
</tr>
</tbody>
</table>
When the item quantity is changed in input field, the function that passes item id fires: $scope.cart.update = function(itemId) { ... } . How do I retrieve this new quanity value for this particular item that triggered on-change event. Is there something in angular like this I can use inside the function?

You can pass item to your cart.update function:
on-change="cart.update(item)"
And then use the qty of this item
$scope.cart.update = function(item) {
// do whatever you want with
// item.qty
}

Angularjs ng-disabled is disabling all of my buttons

I have a function that is called on a click. Once it has been clicked, I want to disable the button that was clicked. So far all I was able to do was to get ALL buttons to disable when I click just one. I tried out putting keys but I had no luck with that.
Here is my html:
<tr ng-repeat="parcel in parcels">
<td><a ng-href="http://www.local.com/orders/{{ parcel.id }}/edit/">{{ parcel.id }}</a></td>
<td>{{ parcel.tid }}</td>
<td>{{ parcel.srfn }}</td>
<td><a class="btn btn-success" ng-disabled="isDisabled" ng-click="resolve({{parcel.id}})">Resolve</a></td>
</tr>
Here is my controller:
$scope.isDisabled = false;
$scope.resolve = function(id)
{
$scope.order_id = id;
$http({
method: 'GET',
url: '/outboundsummary/' + $scope.order_id,
})
.success(function(data){
console.log(data.dp);
$window.alert("Resolved!");
$scope.isDisabled = true;
return false;
});
}

$scope.isDisabled preserves a single state of a $scope variable in your controller. Since you want to disable the state of the resolve button of each parcel in your ng-repeat, you can use the parcel object to dictate its state, additionally you can pass the parcel variable in your resolve() function to get both the state and the id. There is no need to interpolate {{}} the parcel id when passing angular expressions to ng-click callbacks.
DEMO PLUNKER
JAVASCRIPT
$scope.resolve = function(parcel) {
$http({
method: 'GET',
url: '/outboundsummary/' + parcel.id,
})
.success(function(data){
parcel.disabled = true;
});
};
HTML
<tr ng-repeat="parcel in parcels">
<td><a ng-href="http://www.local.com/orders/{{ parcel.id }}/edit/">{{ parcel.id }}</a></td>
<td>{{parcel.id}}</td>
<td>{{parcel.desc}}</td>
<td>
<a class="btn bnt-success" ng-disabled="parcel.disabled" ng-click="resolve(parcel)">Resolve</a>
</td>
</tr>
UPDATE:
As discussed in our chat discussion, you're ng-click callback should have passed parcel instead of parcel.id - ng-click="resolve(parcel)"
Furthermore, your resolve() function should look like this:
$scope.resolve = function(parcel) {
$http({
method: 'GET',
url: '/outboundsummary/' + parace.id,
})
.success(function(data){
parcel.disabled = true;
});
};

Since ng-repeat creates a new child scope for each element this one is easy i think. Try
<td><a class="btn btn-success" ng-disabled="disabled" ng-click="[resolve(parcel.id), disabled=true]">Resolve</a></td>

You can try something like this:
<a ng-disabled="isDisabled(parcel.id)" ng-click="resolve(parcel.id)">Resolve</a>
and in your controller:
var disabled = [];
$scope.isDisabled = function(id)
{
if(disabled[id] === undefined) return false;
return disabled[id];
}
$scope.resolve = function(id)
{
disabled[id] = true;
.....
}

I would try add {{parcels |json}} above or bellow table to see if problem is in ng-disable or in data you are sending to ng-repeat