Using jQuery templates is easy for some simple data structures.
<script type="jquery/x-jquery-tmpl" id="myTemplate">
<li> ${Element} </li>
</script>
var elements = [
{ Element: "Hydrogen" },
{ Element: "Oxygen" },
{ Element: "Nitrogen" }
];
$("#elementsPlaceholder").replaceWith($("#myTemplate").tmpl(elements));
But if I need a template for more complex data? Something like:
<script type="jquery/x-jquery-tmpl" id="myTemplate">
<div> ${Molecule} </div>
consists of:
<ul>
<li> ${Element} </li>
</ul>
</script>
How can apply data to that? Is it possible? Could you show me an example?
<ul>
<li> ${Element} </li>
</ul>
should use {{each}}
<ul>
{{each Elements}}<li>${$value.Element}</li>
</ul>
and then you pass in both the molecule and the elements
$("#elementsPlaceholder").replaceWith($("#myTemplate").tmpl({
Molecule: ...
Elements: [{ Element: "Hydrogen" }, ...]
}))
Related
I'm trying to render a <li> with some ng-zorro tags, I try with innerHTML but when i enter to the page this fails, I want to show differents menu's if the user get in a specific application (route)
I have my JSON like this
menuApp = [
{
"app": "requerimientos",
'menu': '\
<li nz-menu-item nzMatchRouter>\
<a routerLink="/applications/dashboard/requerimientos/crear-pedido">Crear pedido</a>\
</li>\
<li nz-menu-item nzMatchRouter>\
<a routerLink="/applications/dashboard/requerimientos/verificar-pedido">Verificar pedido</a>\
</li>\
'
}
]
and in my HTML
<li nz-submenu nzOpen nzTitle="Menú {{activeChild}}" nzIcon="appstore" *ngIf="activeChild != ''">
<div *ngFor="let app of menuApp; index as i">
<ul *ngIf="app.app === activeChild">
<div [innerHTML]="app.menu"></div>
</ul>
</div>
</li>
but when i render the page the <li> print without any ng-zorro tag or class
hope someone can help me
Angular doesn't work that way. Custom directives (like nzMatchRouter) cannot be shoehorned in with an innerHTML. You have to instruct the parser to compile the HTML after it's been added. But even still, there are more efficient, angular-centric methods you can use - like keeping your menu as a simple array of text/url values and using *ngFor to iterate them. That way the <li> directives are compiled at runtime
menuApp = [
{
"app": "requerimientos",
'menu': [
{text: "Crear pedido", url: "/applications/dashboard/requerimientos/crear-pedido" },
{text: "Verificar pedido", url: "/applications/dashboard/requerimientos/verificar-pedido" }
]}
Then your HTML would be like
<li nz-submenu nzOpen nzTitle="Menú {{activeChild}}" nzIcon="appstore" *ngIf="activeChild != ''">
<div *ngFor="let app of menuApp; index as i">
<ul *ngIf="app.app === activeChild">
<li *ngFor="item in app.menu" nz-menu-item nzMatchRouter>
<a [routerLink]="item.url">{{item.text}}</a>
</li>
</ul>
</div>
</li>
I'm trying to render the list with vue.js. The data has come from api call.
List rendering is ok, until I try to add data-feature_id="#{{searched_feature.id}}" in li tag.
When I add it, I got an error:
[Vue warn]: Error compiling template:......
<div class="search_feature_select">
<ul>
<li v-for="searched_feature in searched_features" data-feature_id="#{{searched_feature.id}}" #click="add_to_features_list">
#{{searched_feature.name}}
</li>
</ul>
</div>
How can I put searched_feature.id in data-feature_id attribute?
You need to add : before the attribute
<div class="search_feature_select">
<ul>
<li v-for="searched_feature in searched_features" :data-feature_id="searched_feature.id" #click="add_to_features_list">
{{searched_feature.name}}
</li>
</ul>
</div>
if you wish to add the '#' in front of the data-feature_id attribute:
<div class="search_feature_select">
<ul>
<li v-for="searched_feature in searched_features" :data-feature_id="'#' + searched_feature.id" #click="add_to_features_list">
{{searched_feature.name}}
</li>
</ul>
</div>
https://v2.vuejs.org/v2/guide/list.html coughcough*
var app = new Vue({
el: "#app",
data: {
searched_features: [
{
id: 1,
name: "One"
},
{
id: 2,
name: "Two"
},
{
id: 3,
name: "Three"
}
]
},
methods: {
add_to_features_list(){}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="search_feature_select">
<ul>
<li v-for="searched_feature in searched_features" :data-feature_id="searched_feature.id" #click="add_to_features_list">
#{{ searched_feature.name }}
</li>
</ul>
</div>
</div>
Add 'v-bind:' prefix of shorthand ':' before attribute to bind dynamic data.
<div class="search_feature_select">
<ul>
<li v-for="searched_feature in searched_features"
:data-feature_id="searched_feature.id"
#click="add_to_features_list">
{{searched_feature.name}}
</li>
</ul>
</div>
See more https://v2.vuejs.org/v2/api/#v-bind
I am trying to loop through an array from JSON and display the contents more like a side menu. I wrote something like
<ul ng-repeat="(key, value) in menuList.Menu">
<li>{{key}}</li>
<ul ng-repeat="(key, value) in value">
<li> {{key}}</li> //second key
<ul ng-repeat="(key, value) in value">
<li> {{key}}</li>
<ul ng-repeat="(key, value) in value">
<li> {{key}} : {{value}}</li>
</ul>
</ul>
</ul>
</ul>
The problem is my second key has both object and array. How do I display the value of Object and loop/ng-repeat just through the array. I cannot modify it with this as it will display the entire content of the array.
<li> {{key}} : {{value}}</li>
A part of my JSON for better understanding is given below:
{
"class": 99,
"mode" : 0,
"Menu": [{
"MenuNum": 1,
"MenuItems": [{
"ItemNum": 0,
"ItemDesc": "Main Menu",
"ActionCode": "-",
"ActionInst": ""
} , {
"ItemNum": 1,
"ItemDesc": "BBQ",
"ActionCode": "M",
"ActionInst": "0992"
}, {
"ItemNum": 2,
"ItemDesc": "Beverages",
"ActionCode": "M",
"ActionInst": "0992"
}]
},{
"MenuNum": 2,
"MenuItems": [{
"ItemNum": 0,
"ItemDesc": "Sub Menu",
"ActionCode": "-",
"ActionInst": ""
}, {
"ItemNum": 1,
"ItemDesc": "BBQTYPE1",
"ActionCode": "P",
"ActionInst": "0996"
}, {
"ItemNum": 2,
"ItemDesc": "BeveragesTYPE1",
"ActionCode": "P",
"ActionInst": "0998"
}]
}]
}
I want the sidebar more like
Presuming at the moment that you just want the ng-repeat logic, this may be what you are looking for:
<ul ng-repeat="topMenu in menuList.Menu">
<li>
{{$index}}
<ul>
<li>
MenuNum: {{topMenu.MenuNum}}
</li>
<li> MenuItems
<ul ng-repeat="submenu1 in topMenu.MenuItems">
<li>
{{$index}}
<ul>
<li>ItemNum: {{submenu1.ItemNum}}</li>
<li>ItemDesc: {{submenu1.ItemDesc}}</li>
<li>ActionCode: {{submenu1.ActionCode}}</li>
<li>ActionInst: {{submenu1.ActionInst}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you then want a relatively easy way to do the menu opening/closing, you would probably want to put all this into an Angular accordion. I can probably help you with that if you want.
It looks like you're trying to create a list with nested children. How about a recursive pattern which uses ng-include recursively to display all the nested children? Something like this:
<script type="text/ng-template" id="menuTree">
{{ menuItem.name }}
<ul ng-if="menuItem.children">
<li ng-repeat="menuItem in menuItem.children" ng-include="'menuTree'"></li>
</ul>
</script>
<ul>
<li ng-repeat="menuItem in menuItems" ng-include="'menuTree'"></li>
</ul>
I'm using a slightly different data structure to your code, but you should get the idea. Here's a demo: http://jsfiddle.net/mmmxh8kq/
EDIT:
If the data is as simple as the JSON you posted and you don't need a recursive menu, you could just try this:
<ul>
<li ng-repeat="menus in menuList.Menu">
{{ menus.MenuNum }}
<ul>
<li ng-repeat="menuItems in menus.MenuItems">
{{ menuItems.ItemDesc }}
</li>
</ul>
</li>
</ul>
Demo: http://jsfiddle.net/n4mo80od/
I'm trying to apply the below model to a handlebar template to get a simple list , but I guess
either the data hierarchy or the way I'm trying to loop through the data
model may be incorrect.
data.js
{
"categories":[
{
"games":{
"action":{
"game":{
"name":"Game 1",
"Description":"Description 1"
},
"game":{
"name":"Game 2",
"Description":"Description 2"
}
}
}
},
{
"movies":{
"fantasy":{
"movie":{
"name":"Movie 1",
"Description":"Description 1"
},
"movie":{
"name":"Movie 2",
"Description":"Description 2"
}
}
}
}
]
}
template
<ul id="categories">
<li> Games
<ul class="subcategories">
{{#each categories}}
...........
{{/each}}
</ul>
</li>
</ul>
I'd like to get a simple list (see below)
<ul id="categories">
<li> Games
<ul class="subcategories">
<li> Action
<ul>
<li>Game 1</li>
<li>Game 2</li>
</ul>
</li>
</ul>
</li>
<li> Movies
<ul class="subcategories">
<li> Fantasy
<ul>
<li>Movie 1</li>
<li>Movie 2</li>
</ul>
</li>
</ul>
</li>
</ul>
Any help is greatly appreciated.
Your data structure doesn't really represents your expected output.
The structure should be something like this:
data (object)
categories (array)
category (object)
category name
subcategories (array)
subcategory (object)
subcategory name
items (array)
item (object)
item name
item description
Note: I called the innermost array items instead of games/movies/etc, so it's easier to use it in the template.
You can see my implementation in this jsfiddle.
I have following (json) object:
[
{
name: "Foo",
children: [{
name: "bar",
children:[{
...
}]
}]
}
]
There can be any number of children/objects in any level. Now I want to get following HTML Code:
<ul>
<li>Foo</li>
<li>
<ul>
<li>Bar</li>
</ul>
</li>
<ul>
But of course there could be 10 or more levels with 20 or more children per level.
Is there any way to do that? Thank you very much!
this should work, just replace json array with your data
<script type="text/ng-template" id="nodes_renderer.html">
{{node.name}}
<ul ng-model="node.children" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.children" ng-include="'nodes_renderer.html'">
</li>
</ul>
</script>
<div data-drag-enabled="false">
<ul>
<li ng-repeat="node in #*JSON ARRAY*#" ng-include="'nodes_renderer.html'">
</li>
</ul>
</div>