Develop Reference

Vue how to traverse the list correctly?

I just writed the vue simple code, But unable to follow the HTML effect. After traversal rendering a bit wrong. If gift object is no, for example the goods object has two data, goods_b1 + goods_b2. But i want to follow the HTML effect. Go to the HTML still. And go to the vue loops.
I want to the this effect:
Look at the javascript:
var app = new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: 'A',
goods: [{
name: "goods_a1"
}],
gift: [{
name: "gift_a1",
}]
}, {
id: 2,
name: 'B',
gift: [],
goods: [{
name: "goods_b1"
}, {
name: "goods_b2"
}],
}, {
id: 3,
name: 'C',
goods: [{
name: "goods_c1"
}, {
name: "goods_c2"
}, {
name: "goods_c3"
}],
gift: [{
name: "gift_c1",
}]
}]
}
})
HTML:
<div id="app">
<div class="mui-row" v-for="item in list">
<div class="span-title-main">
<span class="span-title">{{item.name}}</span>
</div>
<br>
<ul>
<li>
<div class="mui-col" v-for="items in item.goods">
<span class="span-name">{{items.name}}</span>
</div>
<div class="addspan">+</div>
<div class="mui-col" v-for="itemss in item.gift">
<span class="span-name">{{itemss.name}}</span>
</div>
<div class="addspan">+</div>
</li>
</ul>
</div>
</div>

Are you asking that the (+) being inside the loop of your goods and gift ?
<div id="app">
<div class="mui-row" v-for="item in list">
<div class="span-title-main">
<span class="span-title">{{item.name}}</span>
</div>
<br>
<ul>
<li>
<div class="mui-col" v-for="items in item.goods">
<span class="span-name">{{items.name}}</span>
<div class="addspan">+</div>
</div>
<div class="mui-col" v-for="itemss in item.gift">
<span class="span-name">{{itemss.name}}</span>
</div>
</li>
</ul>
</div>
</div>
Edit: Remove the (+) for gifts loop as requested by OP.
Note: if the OP is asking to have a style for element in between goods and gift. I would suggest to use the css :last selector with a display:none to have this kind of effect.

It looks like the only difference is that you want a + button to appear after each item.goods instead of just one after the loop.
So put it inside the loop:
<template v-for="items in item.goods"><!-- using "template" to avoid modifying your html structure; you could of course use any tag -->
<div class="mui-col">
<span class="span-name">{{items.name}}</span>
</div>
<div class="addspan">+</div>
</template>
<div class="mui-col" v-for="items in item.gift">
<span class="span-name">{{items.name}}</span>
</div>
<!-- your image doesn't show a + button after gifts, so I've omitted it here -->

Differentiate staticCards & Dynamiccards

From Json API, data are read and displayed in the HTML.
User can also add custom articles which are stored as staticCards object inside script tag.
Now i wanted to find the HTML which is rendering the staticCards and add a class only to those articles.
How can i differentiate ? staticCards & Dynamiccards (directly rendered from JSON API)
var staticCards = [{
"cardLayout": "comms-double-image",
"cardLabel": "STORY",
"cardTitle": "households receive their share of $3.4 billion",
"cardDate": "05 April 2017",
"fileReference": "/content/dam/caas/newsroom/images/2016-09-15-newsroom-habib-spoons-banner-image.png",
"imageFocus": "image-centre-focus",
"cardLinkURL": "#",
"cardLinkDTM": "data-tracker-id=\"cards_1_1\" data-tracker-type=\"button\" data-tracker_ei=\"cards_1_1\" "
}]
<script type="text/x-handlebars-template" id="comms-double-image">
<article class="card card-double cvp comms image" data-tags="">
<a href="{{link}}" class="link" data-tracker-id="{{trackerId}}" data-tracker-type="{{trackerType}}" data-tracker_ei="{{trackerEI}}">
<div class="mobile-wrapper">
<div class="background-container" style="background-image : url({{image}});">
<h4 class="eta font-low-impact">{{label}}</h4>
</div>
<div class="content">
<time datetime="{{date-time}}">{{date-time}}</time>
{{#xif "this.title > 45"}}
<h3>{{title}}</h3>
{{else}}
<h3 class="delta">{{truncate title 55}}</h3>
{{/xif}}
<p class="cta">{{link-desc}}</p>
</div>
</div>
</a>
</article>
</script>

Using the same controller for two identical divs with different data and using xeditable for second div

So I'm trying to duplicate the section div (so I can have multiple sections with multiple articles). I tried using the same controller for both divs as shown below. So I'm able to add the section by appending it to main but I can't edit the second div. Is there any way around this?
I am not using bootstrap and i'm using xeditable.
HTML:
<div id="main" ng-app="main">
<div class = "section" ng-controller="newsController">
<h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
<div class = "article" ng-repeat="article in sections.articles">
<h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
<p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
<p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
<p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
</div>
<div class = "section" ng-controller="newsController">
</div>
</div>
JS:
newsletter.controller('newsController',function($scope){
$scope.sections = {
section: "Faculty",
articles: [
{
title: "In __ We Trust",
link:'http://wee.com',
publisher: "Me",
orig_title:"",
description: "Description Here"
}
]
};
$scope.addItem = function(){
$scope.sections.articles.push(this.sections.articles.temp);
$scope.sections.articles.temp={};
};
)};
var newSection = '//Pretend all the tags and the attributes as above are placed here'
$("#add-section").click(function(){
var $section = $('#main').append(newSection);
});
Apologies for formatting. I'm still new to this. Thanks!
Edit: I'm also trying to make this dynamic so the user could edit the texts like the title and the publisher, etc. How would I make the added section also editable?

Try it this way, instead of appending it uses angulars natural way of repeating divs aka ng-repeat:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sections = {
section: "Faculty",
articles: [{
title: "In __ We Trust",
link: 'http://wee.com',
publisher: "Me",
orig_title: "",
description: "Description Here"
}]
};
$scope.addItem = function() {
$scope.sections.articles.push(this.sections.articles.temp);
$scope.sections.articles.temp = {};
};
var newSection = '//Pretend all the tags and the attributes as above are placed here'
$("#add-section").click(function() {
var $section = $('#main').append(newSection);
});
});
</script>
<div id="main" ng-app="myApp" ng-controller="myCtrl">
<div class="section" ng-repeat="i in ['0','1']">
<h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
<div class="article" ng-repeat="article in sections.articles">
<h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
<p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
<p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
<p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
</div>
<div class="section" ng-controller="myCtrl"></div>
</div>

I Got the answer! So I applied the app to the html document and the controller to the body as opposed to the main div and made an array of sections as opposed to a singular section. I did a ng-repeat for the section div. By doing so, I added a "addsection" function where I create a section to be added to the array and the section has to have the same properties as the other ones including an empty array of articles.
HTML:
<body ng-controller="newsController">
<ul id="convenient-buttons">
<li id="add-section">Add Section</li>
<li>Select All</li>
<li><a href=# id="export" onclick="selectText('json')" ng-mouseenter="showJson=true" ng-mouseleave="showJson=false" >Send to Server</a></li>
</ul>
<div id="main">
<div class = "section" ng-repeat="section in news.sections" >
<h2 id="section" editable-text="sections.section">{{sections.section}}</h2>
<div class = "article" ng-repeat="article in sections.articles">
<h3 id="title" editable-text="article.title"><a editable-text="article.link" href="{{article.link}}">{{article.title}}</a></h3>
<p id="publisher" editable-text="article.publisher">{{article.publisher}}</p>
<p id="orig_title" editable-text="article.orig_title">{{article.orig_title}}</p>
<p id="descr" ng-bind-html="article.description" editable-text="article.description"></p>
</div>
</div>
</body>
JS:
$scope.news = {
sections: [
{
title: "Faculty",
articles: [
{
title: "In Memoriam: Eli Pearce",
link:'http://engineering.nyu.edu/news/2015/05/29/memoriam-eli-pearce',
publisher: "NYU Newsroom",
orig_title:" ",
description: "When <strong>Professor Eli Pearce</strong> passed away on May 19, 2015, a slice of Poly history passed along with him. Pearce had been affiliated with the school, then known as the Polytechnic Institute of Brooklyn, since the mid-1950s, when he conducted his doctoral studies in chemistry here. As a student, he learned with such luminaries as Herman Frances Mark, who is often called the Father of Polymer Science, and Charles Overberger, another influential chemist who helped establish the study of polymers as a major sub-discipline."
}
]
}
]
};
$scope.addSection = function(){
$scope.news.sections.temp={
title: "Section Title",
articles:[
// {
// title:"Article Title",
// link:"Link",
// publisher: "Publisher",
// orig_title: "Original Title",
// description: "Description"
// }
]
};
$scope.news.sections.push(this.news.sections.temp);
};

HTML functions? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a repeated HTML code, like:
<figure class="print">
<a href="#">
<img src="images/5.png" alt="" />
<dl>
<dt>Client</dt>
<dd>Envato</dd>
<dt>Role</dt>
<dd>Print</dd>
</dl>
</a>
</figure>
Is there a smart way to make a 'function' out of it (that accept the captions and image as parameters), or do I need to repeat that code so many times?

with HTML you don't have the possibility to write functions that generate what you want. It seems that you would like to generate dynamic content. This is usually done by employing a scripting language.
So you have two options here:
Use a server side scripting language like PHP
If you want a client side solution you could use JavaScript which can dynamically create content for you.
For further information just Google for some simple tutorials.

There are no way in pure HTML.
You can use JavaScript(jQuery) or back-end script, like PHP.
$("html").append($(".print").clone());

As other people have said, HTML is a declarative language. However, with modern frameworks like AngularJS, you can write things like:
<figure class="print" ng-repeat="figure in figures">
<a href="#">
<img ng-src="{{figure.image}}" alt="" />
<dl>
<dt>Client</dt>
<dd>{{figure.captions.client}}</dd>
<dt>Role</dt>
<dd>{{figure.captions.role}}</dd>
</dl>
</a>
</figure>
The corresponding model would be:
var figures = [{
image: 'images/5.png',
captions: {
client: 'Envato',
role: 'Print'
}
}, {
image: 'images/6.png',
captions: {
client: 'Another caption',
role: 'Print'
}
}];
It takes some time to get used to it, but you should read the code of their TODO example app.

Try using jquery template.
<script src="jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{ name: "Astor", product: "astor", stocklevel: "10", price: 2.99},
{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99},
{ name: "Rose", product: "rose", stocklevel: "2", price: 4.99},
{ name: "Peony", product: "peony", stocklevel: "0", price: 1.50},
{ name: "Primula", product: "primula", stocklevel: "1", price: 3.12},
{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99},
];
$('#flowerTmpl').tmpl(data).appendTo('#row1');
});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
<div class="dcell">
<img src="${product}.png"/>
<label for="${product}">${name}:</label>
<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
value="0" required />
</div>
</script>

You can do this with underscore templates, for example:
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script id="template" type="text/html">
<% data.forEach(function(item){ %>
<figure class="print">
<a href="#">
<img src="<%= item.src %>" alt="" />
<dl>
<dt>Client</dt>
<dd><%= item.client %></dd>
<dt>Role</dt>
<dd><%= item.role %></dd>
</dl>
</a>
</figure>
<% }); %>
</script>
<div id="container"></div>
In your JavaScript:
var data = [
{
src: 'images/5.png',
client: 'Envato',
role: 'Print'
},
{
src: 'images/4.png',
client: 'Foo',
role: 'Bar'
}
];
var template = document.querySelector('#template').innerHTML;
var html = _.template(template, {data: data});
document.querySelector('#container').innerHTML = html;

Grouping ng-repeat and modifying DOM outside directive

I'm not exactly sure how to describe the issue I am having, or even if it is an issue. I guess I am having trouble wrapping my head around how Angular Directives work. Any advice and/or opinion on best practice is welcomed.
I have a simple array of objects in my controller's $scope:
$scope.birthdays = [
{ name: "bob", dob:moment("09/20/1953"), cake: "vanilla"},
{ name: "michael", dob:moment("09/20/1953"), cake: "chocolate" },
{ name: "dave", dob:moment("09/20/1953"), cake: "chocolate" },
{ name: "chief", dob:moment("04/24/1977"), cake: "chocolate" },
{ name: "jerry", dob:moment("04/24/1977"), cake: "red velvet" },
{ name: "jerkface", dob:moment("04/24/1977"), cake: "i hate cake" },
{ name: "doug", dob:moment("05/10/1994"), cake: "marble" },
{ name: "jeff", dob:moment("05/10/1994"), cake: "vanilla" }
];
Say I would like to create a DOM structure from this data model:
<h1>Birthday: 09/20/1953</h1>
<div class="birthday">
<h2>Name: bob</h2>
<h3>Cake: vanilla</h3>
</div>
<div class="birthday">
<h2>Name: michael</h2>
<h3>Cake: chocolate</h3>
</div>
<div class="birthday">
<h2>Name: dave</h2>
<h3>Cake: chocolate</h3>
</div>
<h1>Birthday: 04/24/1977</h1>
<div class="birthday">
<h2>Name: chief</h2>
<h3>Cake: chocolate</h3>
</div>
....
I can achieve something close to this in this plunker.
There, however, I end up with a slightly different DOM structure that I don't want.
<div ng-repeat="birthday in birthdays" birthday-boy="">
<h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="">
September 20th, 1953
</h3>
<div class="ng-binding">
Name: bob
</div>
<div class="ng-binding">
Cake: vanilla
</div>
</div>
<div ng-repeat="birthday in birthdays" birthday-boy="">
<h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="display: none;">
September 20th, 1953
</h3>
<div class="ng-binding">
Name: michael
</div>
<div class="ng-binding">
Cake: chocolate
</div>
</div>
<div ng-repeat="birthday in birthdays" birthday-boy="">
<h3 ng-show="!birthdays[$index-1].dob.isSame(birthday.dob)" class="ng-binding" style="">
April 24th, 1977
</h3>
<div class="ng-binding">
Name: chief
</div>
<div class="ng-binding">
Cake: chocolate
</div>
</div>
So, my questions are:
Am I thinking about this problem correctly? Should I be modifying my data structure to group it by dates there, and then just ng-repeat over each individual date?
If there is a way to do this with my existing data structure, do I need to modify the DOM outside of the birthday-boy / ng-repeat directive?
Is there a way to wrap the ng-repeat directive into something custom - I have started looking into the compile function but, just not sure...
Thanks!

I would group by dates in your controller, then ng-repeat over that new scope property. Here is a fiddle I wrote for a similar "group by" question. You should be able to adapt it for your code. I used the orderByFilter
$scope.sortedFriends = orderByFilter($scope.friends, '+age');
but you'll likely need to use the dateFilter or whatever JavaScript code you might have around to sort by the dob stuff.