Hi all I am returning a dictionary with a key and list of objects from my controller, I would like to bind this to the table or some other using ng-repeat, this is how it looks when returning data from controller
This is my trail
<tr ng-repeat="(key, value) in dic">
<td>{{value}}</td>
Which is displaying entire value
This is how finally I got it
<div ng-repeat="(key, value) in dic">
{{key}}
</div>
<div ng-repeat="v in value">
{{v.requiredcolumn}}
</div>
ng-repeat provides a mechanism for accessing the key and value of an object within the iterator. For an example of this, see the answer to this post: How can I iterate over the keys, value in ng-repeat in angular
Related
I have an object called "profile" that includes a handful of other objects -- each one I want to display the label followed by the display_value:
In my HTML, I know I need to ng-repeat through the object profile, but have not been able to get the desired display of label: display_value (i.e. Employment Start Date: 11/20/2019). What is the correct syntax to loop through c.profile and display label followed by display_value? Do I need two ng-repeats in this instance?
<div ng-repeat="item in c.profile track by $index">
{{item.?}}: {{item.?}}
</div>
<div ng-repeat="item in c.profile track by $index">
{{item.label}}: {{item.display_value}}
</div>
make sure your data is what you expect it to be.
Use ng-repeat="(key, value) in myObj":
<div ng-repeat="(category, valueObj) in c.profile">
<h2>{{category}}</h2>
<div ng-repeat="(key, value) in valueObj">
{{key}} : {{value}}
</div>
</div>
For more information, see
AngularJS ng-repeat Directive API Reference - Iterating over object properties
I do have a problem with using Angular with Laravel's foreach loop, i tried to be as detailed as possible :)
<div style="padding:15px;" id="table-scroll" ng-app>
<table class="table table-responsive tblProducts" id="tblProducts">
<thead>
<tr>
<th>Description</th>
<th>Prices</th>
<th></th>
<th></th>
<th>Action</th>
</tr>
</thead>
<tbody>
//foreach loop here
</tbody>
</table>
</div>
this is my foreach loop
#foreach($products as $product)
{{ $product->product_description }}
product_price }}" ng-model="price">
#{{price*qty}}
#endforeach
Problem:
-When I use "ng-model" the prices/quantity are not displayed, but when i use "ng-bind" the prices/quantity are displayed but the subtotal column displays NaN (i have no idea why).
Flow:
-Each row of that table displays a list of grocery items, when the checkbox is clicked, it means that the item is selected and transferred to another table for calculating the grandtotal.
Reference:
https://ibb.co/hCddLv (snap from list of grocery items)
https://ibb.co/e0jk0v (when that product is transferred, this happens)
*im using "ng-bind" to display the price and quantity...
Thanks for the answer in advance guys...
I have updated this with my controller code in laravel
public function create()
{
$rooms = Room::where('status','=',0)->orderBy('room_length_of_stay')->get();
$products = DB::table('classifications')
->join('products', 'classifications.id', '=', 'products.classification_id')
->select('classifications.*', 'products.*')
->get();
//$scope.products = $products;
return View::make('frontdesk.transactions.create', ['rooms' => $rooms, 'products'=>$products]);
}
ng-model works by using a property on the scope to read/write a value as an input changes so you can't just assign it some value hence the problem. Ideally I only use Angular for the front end and template handling and would do the looping with an ng-repeat over an array that is retrieved in JS from the backend (could be laravel based but would keep it just serving JSON data not doing anything with the view, lumen is good for this). In the short term you can just set the value attribute on the input that would be the most direct way to put your data into the form that may not work with ng-model though (assuming you pointed that at some JS property) since it's expected the ng-model will be used for reading/writing the value.
Instead of using the foreach in blade use a ng-repeat directive. Get the data in the foreach in a json and iterate it in the template.
Before the render of the angular controller make a script:
<script>
var products = "{{ json_encode($products) }}";
</script>
Then in the controller store it as:
$scope.products = products;
Then iterate it:
<p ng-repeat="product in products">
#{{ product.product_description }}
#{{ product.price*product.qty}}
</p>
I have a map object in my angular controller like this,
var map = new Map();
map.set(1,'a');
map.set(2,'b');
map.set(3,'c');
map.set(4,'d');
$scope.map = map;
How do I display its content in my html file using ng-repeat?
I tried the following, they didn't work
<div ng-repeat ="m in map">
{{m}}
</div>
<div ng-repeat ="(key, value) in map">
{{key}}
{{value}}
</div>
You don't as ng-repeat iterates over an array of objects. But you can use something like Agular Filter GroupBy for that. Or change structure of your array to [{key: 'key', value: 'value'},..] and change ng-repeat to
<div ng-repeat ="item in map">
{{item.key}}
{{item.value}}
</div>
The DOM is not getting reflecting when data comes from database.
When a page load i have some data in productList array and after applying some filter (like price should be between 500-1000), request goes to API and updated productList comes from response. But the products are not getting reflecting on the page.
I am sending the data into a directive which shows separate product of productList from ng-repeat and my code is as below:
<div ng-repeat="product in productList track by $index">
I came to know that $index causes issue when we pass data out from the scope. So the data losses and DOM can not be updated.
I found the solution by using product.id as a key in ng-repeat like below:
<div ng-repeat="product in productList track by product.id">
But the above code again fails and throws the below error when more than one product comes with same id because if a product comes with same id ng-repeat treats those product as same :
angular.js:11706 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater
So finally i solved the problem by making dynamic unique key of ng-repeat like below:
<div ng-repeat="product in productList track by (product.id + $index)">
Just add ng-if in div
<div ng-if="productList" ng-repeat="product in productList track by $index">
I am having an array in controller as follows
function FooController($scope) {
$scope.items = ["a","b","c"];
}
I used ng-repeat to show the data in items,
<div ng-app>
<div ng-controller="FooController">
<ul ng-repeat="item in items">
<li>{{item}}</li>
</ul>
</div>
</div>
I got the result as a,b,c order. I want to show it in reverse order. that means c,b,a without changing its order in the controller or without creating a filter. How to do that?
Check this link
I faced the same problem, but with an array of objects. This quick solution worked for me, but using the filter is still the best practice.
<li data-ng-repeat="item in data.slice().reverse()">
...
</li>
http://bootply.com/SgVBZvZ708
In order to avoid the writting of a custom filter, I suggest you to use this syntax :
<ul ng-repeat="item in items | orderBy:'-toString()'">
The documentation assume you sort an array of Objects but in your case there are just plain strings.
Wrap the strings in objects and use orderBy or create a new filter:
angular.module("app",[])
.filter("reverse", function(){
return function(items){
return items.slice().reverse(); // Create a copy of the array and reverse the order of the items
};
});
And use it like this:
<ul ng-repeat="item in items|reverse">
Updated fiddle (I've also updated the ng-app directive so it's passed the "app" module.)