Develop Reference

Kendo ui MVVM - How to bind an observable array and array inside array using kendo templates

Here is the my working DEMO.
I have an observable array named persons and each array element contains an another array named hobbies.
I have successfully bound the persons array using kendo template, but does anyone know how should I bind the hobbies array using an another template. Below is the code from my DEMO.
Code:
var persons = new kendo.data.ObservableArray(
[
{
name: "John Doe",
age: 28,
hobbies: [
{ id: 1, description: "Baseball", rank: 1 },
{id: 2, description: "music", rank: 3 },
{ id: 3, description: "Surfing the web", rank: 2}
]
},
{
name: "Jane Doe",
age: 24,
hobbies: [
{ id: 1, description: "Volley Ball", rank: 1 },
{id: 2, description: "Cricket", rank: 3 },
{ id: 3, description: "Hockey", rank: 2}
]
}
]
);
var viewModel = kendo.observable({
array: persons
});
kendo.bind($("#example"), viewModel);
<h2>Persons Array</h2><br/>
<div id="example" data-template="template" data-bind="source: array">
</div>
<script id="template" type="text/x-kendo-template">
<div>
Name: #=name# || Age: #=age# <br>
<ul>Hobbies (below, I want to display hobbies)</ul>
<br/>
</div>
</script>

You need to use a for loop inside the ul tag, something like:
# for (var i = 0; i < hobbies.length; i++) { #
<li>#= hobbies[i].description#</li>
# } #
Here it is the updated fiddle

Use another nested template named "hobby-template" and bind "hobbies" as source to that
<h2>Persons Array</h2><br/>
<div id="example" data-template="template" data-bind="source: array">
</div>
<script id="template" type="text/x-kendo-template">
<div>
<span data-bind="text:name"></span>
<span data-bind="text:age"></span>
<ul data-template="hobby-template" data-bind="source: hobbies"></ul>
</div>
</script>
<script id="hobby-template" type="text/x-kendo-template">
<li>
<span data-bind="text:description"></span>
<span data-bind="text:rank"></span>
<li>
</script>

How can I use ng-repeat to iterate through arrays associated using dynamic keys

I am trying to use ng-repeat to iterate through an array of objects and use each objects ID to look up the data binded to a checklist model.
I have the following javascript object in a project I'm working on:
{
diagnosis: {
mainfractures: [
{
id: "metacarpal",
textinput_id: "metacarpal_text",
title: "5th Metacarpal",
},
{
id: "proximal_phalanx",
textinput_id: "proximal_phalanx_text",
title: "Proximal Phalanx",
},
{
id: "middle_phalanx",
textinput_id: "middle_phalanx_text",
title: "Middle Phalanx",
},
{
id: "distal_phalanx",
textinput_id: "distal_phalanx_text",
title: "Distal Phalanx",
},
{
id: "scaphoid_fracture",
textinput_id: "scaphoid_fracture_text",
title: "Scaphoid Fracture",
}
]
}}
Here is what I have for my checklist model. As the user selects a checkbox, a value is binded to the array associated with that fracture.
$scope.checklists = {
"diagnosis": {
metacarpal: [],
proximal_phalanx: [],
middle_phalanx: [],
distal_phalanx: [],
scaphoid_fracture: []
}
}
Checklist Image Example
Once a users makes a selection similar to the image above the the checklist model for metacarpal should look like this: metacarpal: ["head"]
What I'm trying to do is list each of the users selection in bulletpoint via fracture.id. I'm trying to accomplish it with this piece of code but it's only listed the fracture title so far. is it a problem with trying to interpolate fracture.id into ng-repeat?
<div ng-repeat="fracture in diagnosis.mainfractures">
<div > <!--ng-if="checklists['diagnosis'][fracture.id] > 0"-->
<h4>{{ fracture.title }}</h4>
<div class="row">
<ul type="disc">
<li ng-repeat="selection in checklists['diagnosis'][fracture.id]">
• {{ capitalize(selection) }}
</li>
</ul>
</div>
</div>
</div>

Based on your supplied code, I'd have to say your issue is actually due to JS syntax errors. You're missing commas after each object item and there is a random double quote here scaphoid_fracture"[].
$scope.checklists = {
"diagnosis": {
metacarpal: []
proximal_phalanx: []
middle_phalanx: []
distal_phalanx: []
scaphoid_fracture"[]
}
}
Here is a fully working jsfiddle

Adjusted the code a bit:
capitalize ->
uppercase(https://docs.angularjs.org/api/ng/filter/uppercase)
some syntax errors
But seems that access by dynamic object key inside ng-repeat works pretty correct
https://jsbin.com/rodecosoyo/1/edit?html,js,output
Angular Application
var app = angular.module('arrayid', []);
app.controller('arrayContainerCtrl', function($scope) {
$scope.diagnosis = {
mainfractures: [{
id: "metacarpal",
textinput_id: "metacarpal_text",
title: "5th Metacarpal",
}, {
id: "proximal_phalanx",
textinput_id: "proximal_phalanx_text",
title: "Proximal Phalanx",
}, {
id: "middle_phalanx",
textinput_id: "middle_phalanx_text",
title: "Middle Phalanx",
}, {
id: "distal_phalanx",
textinput_id: "distal_phalanx_text",
title: "Distal Phalanx",
}, {
id: "scaphoid_fracture",
textinput_id: "scaphoid_fracture_text",
title: "Scaphoid Fracture",
}]
};
$scope.checklists = {
"diagnosis": {
metacarpal: ['1', '2'],
proximal_phalanx: ['2', '3'],
middle_phalanx: ['3'],
distal_phalanx: ['4'],
scaphoid_fracture: ['5']
}
};
});
Markup:
<body ng-app='arrayid' ng-controller='arrayContainerCtrl'>
<div ng-repeat="fracture in diagnosis.mainfractures">
<h4>{{ fracture.title }}</h4>
<div class="row">
<ul type="disc">
<li ng-repeat="selection in checklists['diagnosis'][fracture.id]">
• {{ selection | uppercase }}
</li>
</ul>
</div>
</div>
</body>

How to make a list with datemarks on Vue.js?

Just have such a view:
<div class="items">
<div class="datemark" data-date="1">Today</div>
<div class="item" data-date="1">Item 1</div>
<div class="item" data-date="1">Item 2</div>
<div class="item" data-date="1">Item 3</div>
<div class="datemark" data-date="2">Tommorow</div>
<div class="item" data-date="2">Item 1</div>
<div class="item" data-date="2">Item 2</div>
<div class="item" data-date="2">Item 3</div>
</div>
with such data:
data = [
1: {
human: 'Today',
date: 1,
items: [
item1: {
name: 'test',
date: 1 // possible here
},
item2: {...},
]
},
2: {
human: 'Tommorow',
date: 2,
items: [
item1: {...},
item2: {...},
]
}
]
or it can be:
data = [
item1: {
name: 'test',
date: 1 // possible here
},
item2: {
name: 'other',
date: 2 // possible here
},
...
]
How to make it works and can be sorted desc/asc by datemarks and 'inside' datemarks range if it have different hours and minutes also?
Tried v-for but only simple lists, how with datemarks?
Thanks!

You don't have to do it like this, use a computed property instead, and you can see I used slice, it's because I want to copy the array instead of sorting the elements in place:
const app = new Vue({
el: '#app',
data: {
order: 'ASC',
list: [
{
name: 'item1',
date: 1 // possible here
},
{
name: 'item2',
date: 2 // possible here
},
{
name: 'item3',
date: 3 // possible here
},
{
name: 'test',
date: 4 // possible here
},
{
name: 'other',
date: 5 // possible here
}
]
},
computed: {
sortedList() {
return this.list.slice(0)
.sort((a, b) => {
if (this.order === 'ASC') {
return b.date - a.date;
}
return a.date - b.date;
})
}
},
methods: {
toggleSort(type){
this.order = type;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div>
<button v-on:click="toggleSort('ASC')">ASC</button>
<button v-on:click="toggleSort('DSC')">DSC</button>
</div>
<div>
<div class="datemark" v-for="item in sortedList">
<div class="item">{{item.name}}</div>
</div>
</div>
</div>
And for your reference, if you're actually doing comparison on real dates, use this instead"
array.sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(b.date) - new Date(a.date);
});

how to execute function on ng-repeater running

Hi I have problem with ng-repeater in angular I want to execute function to do calculation on run my problem now the function is not execute when I pass the Id https://jsfiddle.net/gkqL3zdp/1/
can someone help me ?
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="category in model.categories"> <span> Category: {{ category.name }} </span>
<div ng-click="getID(category.Id)">
</div>
</div>
debugger;
angular.module("app", [])
.controller('ctrl', ['$scope',
function ($scope) {
$scope.model = {
categories: [{
"Id": 1,
name: '1'
}, {
"Id": 2,
name: '2'
},{
"Id": 3,
name: '3'
},{
"Id": 4,
name: '4'
}]
}
$scope.getID = function(id){
id=+2
console.log(parentId)
return result;
}
}])

You can use ng-init for that.
On the same div use something like:
<div ng-repeat="repeatExpression">
<div ng-init="getId()"></div>
</diV>

your clickable divs were 0 height and your parentId and result variables were undefined. I fixed in https://jsfiddle.net/gkqL3zdp/1/
$scope.getID = function(id){
console.log(id)
return id;
}

orderBy in inner loop on nested ng-repeat

I want to filter websites that are in the filtered categories and display them in order of their rank.The code snippet is:
<div ng-repeat="category in categories | filter:{will return more than one category}">
<div ng-repeat="website in websites | orderBy:'rank'| filter:{ parent_id : category.id }:true">
{{website.title}},{{website.rank}}
</div>
</div>
But in the nested loop, since orderby is in inner loop, it works for each iteration of outer loop but the overall result is not sorted according to rank. Say there are three categories and filter gives cat1 &cat2. If websites with rank 6,2,5 are is cat1 and 9,1 in cat2 then the result will be 2,5,6,1,9.I want the result to be 1,2,5,6,9.How should I do that ?
Should I pass the category in some function and write the js code to get the array of filtered website and then sort them and return them to template or is there any other better way to do that in template itself?

I think what you want to do, can not be done as is. Anyway you could use a custom filter.
New Answer
This approach gives you a category selection mechanism as another example of how you could use this custom filter.
angular.module('app',[])
// categories
.value('categories', [ { id: 0, title:"first" }, { id: 1, title:"second" }, { id: 2, title:"third" } ])
// websites
.value('websites', [ { rank: 3, parent_id: 2, title: "Alice" },
{ rank: 1, parent_id: 1, title: "Bob" },
{ rank: 9, parent_id: 1, title: "Carol" },
{ rank: 2, parent_id: 0, title: "David" },
{ rank: 4, parent_id: 0, title: "Emma" },
{ rank: 5, parent_id: 0, title: "Foo" } ])
// controller,
.controller('ctrl', ['$scope', 'categories', 'websites', function($scope, categories, websites) {
// categories injected
$scope.categories = categories;
// websites injected
$scope.websites = websites;
// categories selection helper, useful for preselection
$scope.selection = { 0: true, 1:false } // 2: false (implicit)
}])
// categories filter, categories injected.
.filter('bycat', ['categories', function(categories) {
// websites is the result of orderBy :'rank', selection helper passed as paramenter.
return function(websites, selection) {
// just an Array.prototype.filter
return websites.filter(function(website) {
// for each category
for(var i=0; i < categories.length; i++) {
var cat = categories[i];
// if category is selected and website belongs to category
if (selection[cat.id] && cat.id == website.parent_id) {
// include this website
return true;
}
}
// exclude this website
return false;
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span ng-repeat="category in categories">
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" ng-model="selection[category.id]" name="group" id="{{category.id}}" />
{{category.title}}
</label>
</span>
<div ng-repeat="website in websites | orderBy:'rank'| bycat: selection">
<p>Rank:{{website.rank}} - {{website.title}} ({{categories[website.parent_id].title}})</p>
</div>
</div>
Old Ansewer
Se code comments.
angular.module('app',[])
// categories will be injected in custom filter.
.value('categories', [ { id: 1, title:"first" }, { id: 2, title:"second" } ])
.controller('ctrl', function($scope) {
// sample websites
$scope.websites = [ { rank: 1, parent_id: 2, title: "Site w/rank 1" },
{ rank: 9, parent_id: 2, title: "Site w/rank 9" },
{ rank: 2, parent_id: 1, title: "Site w/rank 2" },
{ rank: 4, parent_id: 1, title: "Site w/rank 4" },
{ rank: 5, parent_id: 1, title: "Site w/rank 5" } ];
})
// custom filter, categories injected.
.filter('bycat', ['categories', function(categories) {
// websites is the result of orderBy :'rank'
return function(websites, catText) {
// just an Array.prototype.filter
return websites.filter(function(website) {
// if no filter, show all.
if (!catText) return true;
for(var i=0; i < categories.length; i++) {
var cat = categories[i];
// if matches cat.title and id == parent_id, gotcha!
if (cat.title.indexOf(catText) != -1 && cat.id == website.parent_id) {
return true;
}
}
// else were
return false;
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="filterText">
<p>Try "first" and "second"</p>
<div ng-repeat="website in websites | orderBy:'rank'| bycat: filterText ">
{{website.title}},{{website.rank}}
</div>
</div>