Maybe I'm thinking about this the wrong way but let me explain:
I have 16 products and multiple orders. I know that these will be the only 16 products I ever have. (the following code doesn't work)
<div ng-repeat="order in orders">
<span ng-repeat="product in products">{{order.{{product}}}}</span>
</div>
my orders are structured like this:
{"date":"5834755","product1":564,"product2":456,etc...
I could write it like this:
<div ng-repeat="order in orders">
<span>{{order.product1}}</span>
<span>{{order.product2}}</span>
etc...
</div>
I am probably overthinking and trying to over simplify my template... What do you think?
I have used a similar notation to print the data of an object and I recommend you do the following:
<div ng-repeat="order in orders">
<span ng-repeat="product in products">{{order[product]}}</span>
</div>
This should work.
Related
I am trying to find some documentation for being able to append a counted number to each item returned by an ng-repeat. Is this not an out of a box thing for Angular? Not quite like an Id, but more like, if 4 items returned, each item JSON object could add a number in front of data returned. My code looks like:
<div class="swipeBoxes" ng-repeat="swipe in swipes">
<a href="#">
<div class="swipeBox">
<span class="swipeNum"></span>
<p><span>swipe date:</span><span>{{ swipe.date | date: 'MM/dd/yyyy'}}</span></p>
<p><span>provider:</span><span>{{ swipe.merchant }}</span></p>
<p><span>amount:</span><span>{{ swipe.amount | currency }}</span></p>
</div>
</a>
</div>
You can use $index for your counter.
<div class="swipeBoxes" ng-repeat="swipe in swipes">
{{$index + 1}}
</div>
Using $index from ngRepeat should be able to solve your problems.
I want to determine whether any ng-repeated element is rendered.
I write this code
<div ng-show="anyRendered">Any has been rendered</div>
<div ng-show="anyFilterActive">ANY FILTER IS ACTIVE</div>
<div class="selected-filter-value" ng-if="filter.name && filterCtrl.isActiveFilter(filter)" data-ng-repeat="(name, filter) in filterOptions">
<span ng-init="anyFilterActive = true;">{{filter.name}}:</span>
</div>
But this code doesn't work. Also I try to write $parent.anyRendered inside ng-repeat.
Try with ng-if
<div ng-show="filterOptions.length > 0">Any has been rendered</div>
<div ng-if="filterOptions.length > 0" ng-repeat="(name, filter) in filterOptions">
<span></span>
</div>
just use $index
<div ng-repeat="(name, filter) in filterOptions">
<span ng-show="$index > 0"></span>
</div>
ngRepeat Docs $index
In the example in the ng-repeat docs u can see the usage of $index
You must not write code logic in your templates: all the code must be in your controllers, filters, directives and services. The ng-init directive is only here so that you can create aliases to make your templates simpler.
Filters and directives contain "presentation code" and controllers and services contain "business related code".
You could create a filter to know if an object is empty or not (filter code from another question), and use it with ng-if, ng-show...
Resulting template:
<div ng-if="filterOptions|empty">
Nothing to show!
</div>
<div ng-repeat="(k, v) in filterOptions">
{{k}}, {{v}}
</div>
I have a collection of items, that I would like to stuff into a bootstrap grid. This then looks like this:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
So I would need to loop through my collection and adding after every second item
There are two issues:
invalid html! No idea how to get around this
Issues with the module, but I think with some helpers I could get around.
Best would be if there were some examples.
Thanks for any inputs
check out this question. you should be searching for handlebars or spacebars to get better results. Blaze is the template engine; not the template system (if that makes sense.)
How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?
Generically, you need to ensure that your collection is exposed to the template, most likely in a template helper. Then you can iterate the collection items like so:
{{#each templateHelperName}}
<div class="row">
<div class="col-md-8">{{propertyName1}}</div>
<div class="col-md-4">{{propertyName1}}</div>
</div>
{{/each}}
To create a template helper, take a look at the meteor docs; they're quite good.
If this doesn't help, perhaps you can provide some more clarity about what your collection looks like, and how you'd like it displayed. Your code doesn't really give much indication.
I am trying to sort data using orderBy in angular js, but it is not sorting data.
can any one help me out ?
please check fiddle
I am using following code
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:person.order">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>
Two small changes, remove person, and add quotes
<div ng-repeat="person in data | orderBy:'order'">
Try the following:
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:'order'">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>
I hope this helps!
You need to put your parameter in single quotes as you are passing it to the filter function. 'param', and also since you are already iterating the object, just the property name is sufficient.
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:'order'">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>
I have a problem with ng-repeat and ng-init. It doens'nt show me the content nor the ID when i ask for them in my code (project.content). But it doesn't show the text itself either. So somewhere something is going wrong. Note that I use other open and close tags for angular as default.
Appareantly Angular sees something different in the code as the browser or I do, as I recieve this console error:
http://errors.angularjs.org/1.2.12/$parse/ueoe?p0=projects%20%3D%20%7B
<table ng-init="projects = {" id":"1","content":"testtesttest"}="" "="">
How can I get this to work?
HTML code:
<div ng-app="overviewApp">
<table ng-init="projects = <?=json_encode($projects)?> ">
<tr ng-repeat="project in projects">
<td>[{[project.content]}]</td>
</tr>
</table>
</div>
Looks like this when in browser source code:
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-12">
<div class="content-section">
<div ng-app="overviewApp">
<table ng-init="projects = {"id":1,"content":"TestTestTest"} ">
<tr ng-repeat="project in projects">
<td>[{[project.content]}]</td>
</tr>
</table>
</div>
It cannot parse it because it is seeing double quotes inside double quotes. Try using single quotes.
<table ng-init='projects = <?=json_encode($projects)?> '>
Also you must ensure that projects is in array format like so:
ng-init='projects = [{"id":1,"content":"TestTestTest"}]'
Finally, since you are using a custom interpolate providers {[{ and }]}, you must define that in your config:
app.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('[{[');
$interpolateProvider.endSymbol(']}]');
}]);
See it working: DEMO
Alternatively, instead of using interpolation markup, I would recommend using the ng-bind directive like so:
<td><span ng-bind="project.content"></span></td>
See a DEMO.
NOTE: The AngularJS documentation recommends using a controller over the ng-init directive to initialize values on a scope.