I have incoming JSON:
[{"key":"browser","value":"Chrome"}, {"key":"geo","value":"false"},{"key":"os","value":"MacOS"}]
And I have to display this by using Handlebars template.
I can't use the construction below because **sometimes I have only 2 objects inside JSON:**
Backbone Model
attr.browser = attr[0];
attr.geo = attr[1];
attr.os = attr[2];
Handlebars template:
<ul>
{{#if browser}}
<li>{{browser.key}}</li>
<li>{{browser.value}}</li>
{{/if}}
{{#if geo}}
<li>{{geo.key}}</li>
<li>{{geo.value}}</li>
{{/if}}
{{#if os}}
<li>{{os.key}}</li>
<li>{{os.value}}</li>
{{/if}}
</ul>
I found the answer, maybe it will be useful for somebody:
So, if you have a Backbone.Model with list of objects inside, like this:
[{"key":"browser","value":"Chrome"}, {"key":"geo","value":"false"},{"key":"os","value":"MacOS"}]
You probably can use this template for display contents of each object:
<ul>
{{#each this}}
<li>{{key}}</li>
<li>{{value}}</li>
{{/each}}
</ul>
Related
I want to generate a tree layout by recussion in the template in my AngularJs application.
The template content is generated by bellow codes.
function genTemplate(moduleName) {
return `<script type="text/ng-template" id="${moduleName}-zgTree">
<span class="{{node.fa5Classes}}"></span> {{node.title}}
<ul class="nav list-group margin-bottom-0" uib-collapse="node.isCollapsed">
<li class="list-group-item list-group-item-action"
ng-repeat="node in node.children"
ng-init="render(node)"
ng-class="{'list-group-item-success': node.isActive}"
ng-click="onClick(node)"
ng-include="'${moduleName}-zgTree'">
</li>
</ul>
</script>`;
}
In the directive definition I use:
this.templateUrl = genTemplate(moduleName);
These result:
Error: [$templateRequest:tpload] Failed to load template:
The point is that I need to use ng-include for the recussion, and I need to provide the template-id to ng-include, so I cannot set this.template instead;
Most talks about the dynamic-templateUrl (such as this) focus on generating the URL dynamically/conditionally, but none about the template content; so they do not help much.
I have codeigniter project with handlebars.js
and I have page (page.template.html) through codeigniter api I pass lang variables
inside the page when loop with handlebars with an array I can't use the lang var because it will get form the array
is there anything to escape getting from the array .. OR any other solutions?
in the code below .. the array is (orgLang) and (this) is the element
the array looks like:
orgLang = ['ar' ,'en']
and the lang var is (details.slug)
{{#each orgLang}}
<a class="dropdown-item lang-picker-item" href="{{details.slug}}/{{this}}">
<img width="25px" src="assets/images/flags/{{this}}.jpg" >
</a>
{{/each}}
I found this solution and it's worked
add ../ before the variable
because it's in another scope
{{#each orgLang}}
<a class="dropdown-item lang-picker-item" href="{{../details.slug}}/{{this}}">
<img width="25px" src="assets/images/flags/{{this}}.jpg" >
</a>
{{/each}}
I have a project with Angular where I don't want to use a select element with ng-options, so I made up a list with different options in order to select one of them.
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry"><p>{{c.name}}</p></li>
</ul>
</div>
So the option selected would modify another element where the chosen option would be displayed.
<div>
<ul>
<li>{{selectedCountry}}</li>
</ul>
</div>
In order to do that, I would need to pass the data from the chosen option of the first element into the 2nd one. I have tried doing something like this
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry = {{c}}"><p>{{c.name}}</p></li>
with no success.
You can check the plunker here Thanks in advance
I suggest you to use a function over there like this in the DEMO
<li ng-repeat="c in shippingCountry" ng-click="Click(c)"><p>{{c.name}}</p></li>
Having this method in your controller
$scope.Click=function (c)
{
$scope.select=c;
}
It creates child scope for each iteration, so explicitly refer parent scope:
Change like this,
<ul>
<li ng-repeat="c in shippingCountry" ng-click="$parent.selectedCountry = c"><p>{{c.name}}</p></li>
</ul>
DEMO
I've fixed your plunker here. It would be better to use methods in scope for this operations because they work in current scope, not in child
<li ng-repeat="c in shippingCountry" ng-click="selectCountry(c)">
<p>{{c.name}}</p>
</li>
// .html
<div>
<ul>
<li>{{selectedCountry.item}}</li>
</ul>
</div>
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry.item = c"><p>{{c.name}}</p></li>
</ul>
</div>
// controller
$scope.selectedCountry = {
item: $scope.shippingCountry[0]
};
Example
I am trying to iterate over a JSON object userTypes.
For the below code:
In the 1st ng-repeat:
{{user.type}} outputs 'Parent'(as expected),
{{user.options}} outputs '[{"option1":"11QWERT","option2":"22QWERT"}]'(as expected).
But in the 2nd ng-repeat, I am not able to iterate through the user.options and output each of the {{options}}
What should be changed to get the option1 and option2 as the outputs in 2nd ng-repeat ?
JS snippet
var userTypes = [{
"type": 'Parent',
"options": [{
"option1": "11QWERT",
"option2": "22QWERT"
}]
}]
HTML snippet
<li ng-repeat="user in userTypes">
<p>{{user.type}}</p>
<p>{{user.options}}</p>
<li ng-repeat="option in user.options">
<p>
{{option}}
</p>
</li>
</li>
Replace your child <li> with <ul> and then you can iterate user.options like so:
<li ng-repeat="user in userTypes">
<p>{{user.type}}</p>
<ul ng-repeat="(key, value) in user.options[0]">
<p>{{key}}: {{value}}</p>
</ul>
</li>
Or if your options may include more then one object:
<li ng-repeat="user in userTypes">
<p>{{user.type}}</p>
<ul ng-repeat="option in user.options">
<li ng-repeat="(key, value) in option">{{key}}: {{value}}</li>
</ul>
</li>
If you don't need object keys:
<ul ng-repeat="option in user.options">
<li ng-repeat="item in option">{{item}}</li>
</ul>
Fiddle
Extended explanation:
In your example you have <li> tag inside another <li>:
<li ng-repeat="user in userTypes">
<li ng-repeat="option in user.options">
</li>
</li>
Since it is not a valid HTML browser will interprets this markup to following:
<li ng-repeat="user in userTypes">
</li>
<li ng-repeat="option in user.options">
</li>
Since ng-repeat creates new scope for each iteration you can't access user variable in second ng-repeat and iterator wouldn't run.
For this exact JSON input it should be like this:
<li ng-repeat="option in user.options">
<p>
{{option.option1}}
{{option.option2}}
</p>
</li>
However as you said you want non fixed number of options, update your JSON to be like this:
"options":["11QWERT","22QWERT"]
And then your code should work as you wanted it.
You can add each new element to list with simple coma before it.
Since user.options is an array you should loop it again. By doing that you will get an object, with that object you can access your options1 and option2 easily.
please refer working plunker:
http://embed.plnkr.co/5c3i5fY50jLP0fFgxkUX/preview
see through the code if you have any doubt.
Hope this helps
A little aside, but just found out you can render a valid list HTML using ng-repeat-start/end in combination with ng-if="false" for the given array of arrays to flatten them:
<ul>
<script ng-repeat-start="user in userTypes" ng-if="false"></script>
<li ng-repeat="item in user.options">{{item}}</li>
<script ng-repeat-end="" ng-if="false"></script>
</ul>
Just access the propertie of the option object in the second ng-repeat. Like option.option1
You should probably make your user.options an object and not an array containing a single object.
Note the difference between these:
[{"option1":"11QWERT","option2":"22QWERT"}]
{"option1":"11QWERT","option2":"22QWERT"}
You can then iterate the options with an ng-repeat like discussed here:
<li ng-repeat="(key, value) in user.options">
<p>{{ key }}: {{ value }}</p>
</li>
I am working on a Backbone.js app and sending request to my API for JSON data to be show on the front end with Backbone Template.
The returned JSON has some HTML entities within the JSON array, and the HTML is getting printed as text.
Below is my template code:
{{#each this}}
<li>
<a > </a>
<section class="ip">
<p><% {{title}} %></p>
<h3>
<time class="timeago" datetime="{{pubDate}}"></time>
{{type}}
</h3>
</section>
</li>
{{/each}}
{{#unless this}}
<p>Der er pt ingen sociale opdateringer om denne artist</p>
{{/unless}}
Please help.
I'm not sure what templating engine you're using, but the syntax looks like Handlebars for the most part, so that's what I'm going to assume.
In order to escape HTML entities in Handlebars, you need to use {{{triple mustaches}}}
For example, you have JSON:
{
text: "<p>My paragraph</p>"
}
Your template might look like this:
<div>
{{{text}}}
</div>
And your output:
<div>
<p>My paragraph</p>
</div>