Is it possible to use ng-init that make an async call whilst inside an ng-repeat?
For example consider the following:
<div ng-repeat="order in orders">
<md-list>
<md-list-item>
{{order.id}}
</md-list-item>
<md-list-item ng-init="detail = getOrderDetail(order.id)">
{{detail.itemName}}
</md-list-item>
</md-list
</div>
I'd like to call a function for each item being repeated over which will go and fetch some extra data over http.
So in my getOrderDetail I have something this kind of thing:
function getOrderDetail(id) {
return myService.getOrderDetails(id).then(function(orderDetail){
return orderDetail;
});
}
This doesnt work for me, as the detail.itemName in my second md-list-item does not resolve to anything, but I can see the network request made and if I add a breakpoint in my function call I do see the order detail returned with the itemName property present.
Is there a limitation when using ng-init that prevents it working\re-evaluating for async operations?
Thanks
There I can see couple of things wrong implemented
Another wrong thing is you shouldn't be using ng-init for this case
This is not how you can make it working, like you are considering that, data returned from promise will directly put inside a variable.
I'd make those call when I get data & will put data in order object of that element so that I can grab details later from that particular order only
angular.forEach(orders, function(order){
getOrderDetail(id).then(function(response){
order.detail = response;
})
});
HTML
<div ng-repeat="order in orders">
<md-list>
<md-list-item>
{{order.id}}
</md-list-item>
<md-list-item>
{{order.detail.itemName}}
</md-list-item>
</md-list>
</div>
Related
Hey I have array of numbers, I am writing them using ng-repeat. When you click on some number should be pass to function passParameterToService parameter index and should be saved in service to variable this.whichBoard. But I have do something wrong, can someone tell me why ng-repeat don't work when I add service and why after click on some number, it's dont write to a variable?
demo
https://codepen.io/Turqus/pen/WXEryN
In your service you were declaring this.whichBoard but inside the function you again used the same named variable. If you set this.board inside, it would probably work:
app.service('serwis', ()=> {
this.whichBoard = (index) => {
this.board = index;
};
});
Also in the calling method, you have:
<a href="#" ng-click="passParameterToService($index)">
<span ng-repeat="item in arrayIndex">{{item}}</span>
</a>
You're passing $index, which isn't a value. Also, you have the repeat inside the method call, so change it to:
<div ng-repeat="item in arrayIndex track by $index">
{{item}}
</div>
I am having trouble with passing the results of checkboxes from my view to the controller and just get "undefined" in the console log.
FYI - I have my controller as "camp".
In my view I have the following:
<div style="padding:20px;">
<h5>Add a Business</h5>
<md-content style="padding:20px;">
<md-checkbox
ng-repeat="business in camp.businesses"
ng-model="business.selected"
aria-label="Checkbox"
>
{{business.business_name}}
</md-checkbox>
</md-content>
<md-button class="md-raised" ng-click="camp.addBusinesses(business)">
<i class="fa fa-plus"></i> Add
</md-button>
</div>
In my controller I have the following function in an "angular.extend()"
addBusinesses: function(val){
console.log('Display Results: ', val);
}
If I just use the function to log the click event, it's fine. But when I try to pass the "business" object, it says "undefined".
What am I missing here???
The issue is your <md-button> is outside the ng-repeat. Your ng-repeat ends with the </md-checkbox> so when it gets to the button, business is indeed undefined.
Try reformatting your code so that the button is still within the scope of the ng-repeat. Maybe you want the repeat on the md-content instead? I'm not sure what the page is supposed to look like so I can't advise more than that.
I have a list of posts with comments. I need to traverse through array of comments inside each of the posts on my page. I'm trying to create variable inside ngRepeat for posts which I can use like an indexer to display exact comment for each post. Due to ngRepeat creating nested scope, this variable must be unique for each iteration. But when I'm trying to change it with ng-click, it doesn't change.
My ngRepeat:
<div class="question_block col-xs-12"
ng-repeat="answer in question.content.answer track by answer.id">
is followed by <span style="display:none">{{counter=0}}</span>. And then I'm showing some items like <span>{{answer.comments[counter].user.organization.title}}</span>. When I'm trying to do something like <a href ng-click="counter++">Increment</a> nothing happens. What's the matter ?
Use ng-init="counter = 0" and attach your ng-click to a function in your controller:
<div ng-repeat="item in items track by $index" ng-init="counter=0">
{{item}} ({{counter}})
<button ng-click="clickHandler()">Increment</button>
<hr />
</div>
Then, to increment counter in the context of the event, use this.counter
$scope.clickHandler = function() {
this.counter++;
};
Plunker demo : http://plnkr.co/edit/J4d0JlJSKD7i4OfMT2r4?p=preview
I've got this template:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" ng-repeat="product in ad.products">
<a href="{{product.link}}">
<h1>{{product.title}}</h1>
<img src="{{product.src}}">
<p>{{product.description}}</p>
<h5>{{product.price}}</h5>
</a>
</div>
</div>
</div>
From my controller I need to evaluate this template so that it checks how many products that have been selected and then it interpolates each product's values into the template. After that is done I also need to remove the ng-repeat so it doesn't fire an error in the external pages that will use this where angular is not present. However I'd figure that I'd just use a regex to look up the ng-repeat and everything in the expression and then remove it.
I've been looking at $interpolate and $compile but I can't figure out how to work with them from my controller so that it does what I want. This is because when I use these on my template and then console log the template value it's a function with a whole lot of nonsense in it.
So doing this:
ad.html = $compile(res.data, $scope);
Generates something like this:
function(b,c,d){rb(b,"scope");e&&e.needsNewScope&&(b=b.$parent.$new());d=d||{};var h=d.parentBoundTranscludeFn,k=d.transcludeControllers;d=d.futureParentElement;h&&h.$$boundTransclude&&(h=h.$$boundTr…
Can someone shed some light on how to achieve what I want?
Your are using $compile function in wrong way, you should call $compile(html) function by passing $scope parameter like below.
var compiledDOM = $compile(res.data)($scope);//then do append this DOM to wherever you want
ad.html = compiledDOM.html(); //but this HTML would not make angular binding working.
I have following Service-Function, that will return data, which I want to display (notice, that the data can change any time):
myService.getData(); // Returns an array
I have to use a service, since I need this data in other controller/services too.
Now I am not sure, what the best practicse is, too display the data in a template. What I do, is:
Example 1
<li ng-repeat="item in myService.getData()">
{{item.name}}
</li>
Its working fine, but is it best practice?
I also tried following:
Example 2
// In my controller:
$scope.data = myService.getData();
// In the template
<li ng-repeat="item in data" ng-controller="myCtrl">
{{item.name}}
</li>
This does not work (on page load the data is get once into $scope.data. Any Updates are ignored). I guess I could use $watch (to watch myService.getData()). But I guess that´s slower.
What do you think? Can I call a service in a template (like example 1)?
Thank you very much!
use this as a second example(best practice):
// In my controller:
$scope.service= myService
// In the template
<li ng-repeat="item in service.getData()" ng-controller="myCtrl">
{{item.name}}
</li>