The following code is also available in the dojo at http://dojo.telerik.com/@larkydoo/OGeYi. What I need to be able to do is to iterate through my Authors list within the template. I've tried a few variations without any luck. Help?
Thanks!
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div class="demo-section">
<div kendo-list-view id="listView" k-data-source="source">
<div class="product" k-template>
<h3>#:Title#</h3>
<p>#:Publisher#</p>
<p>#:AuthorsList#</p>
<div ng-repeat="author in #=Authors#">Display FullName Here: {{FullName}}</div>
</div>
</div>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.source = new kendo.data.DataSource({
data: [
{
"$id": "1",
"ResourceId": 720,
"Title": "Volleyed and Thundered: A Short, Brutal History of War",
"AuthorsList": "Alfred Lloyd Tennyson",
"Publisher": "University of Hard Knocks",
"Authors": [
{
"$id": "2",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Alfred Lloyd Tennyson",
"IsApproved": false,
"FriendlyPath": "alfred_lloyd_tennyson"
}
]
},
{
"$id": "3",
"ResourceId": 867,
"Title": "Explorations in Imagination",
"AuthorsList": "Vladimir Nabokov, Robert Frost, Virginia Woolf, Ursula LeGuin, and Philip K. Dick",
"Publisher": "University of the Universe",
"Authors": [
{
"$id": "4",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Vladimir Nabokov",
"IsApproved": false,
"FriendlyPath": "vladimir_nabokov"
},
{
"$id": "5",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Robert Frost",
"IsApproved": false,
"FriendlyPath": "robert_frost"
},
{
"$id": "6",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Virginia Woolf",
"IsApproved": false,
"FriendlyPath": "virginia_woolf"
},
{
"$id": "7",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Ursula LeGuin",
"IsApproved": false,
"FriendlyPath": "ursula_leguin"
},
{
"$id": "8",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Philip K. Dick",
"IsApproved": false,
"FriendlyPath": "philip_k_dick"
}
]
},
{
"$id": "9",
"ResourceId": 1031,
"Title": "Stories from Everywhere",
"AuthorsList": "Tobias Wolfe, George Orwell, Ray Bradbury, Doctor Seuss, and Wallace Stevens",
"Publisher": "All Around U",
"Authors": [
{
"$id": "10",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Tobias Wolfe",
"IsApproved": false,
"FriendlyPath": "tobias_wolfe"
},
{
"$id": "11",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "George Orwell",
"IsApproved": false,
"FriendlyPath": "george_orwell"
},
{
"$id": "12",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Ray Bradbury",
"IsApproved": false,
"FriendlyPath": "ray_bradbury"
},
{
"$id": "13",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Doctor Seuss",
"IsApproved": false,
"FriendlyPath": "doctor_seuss"
},
{
"$id": "14",
"AuthorId": 0,
"ResourceId": 0,
"FullName": "Wallace Stevens",
"IsApproved": false,
"FriendlyPath": "wallace_stevens"
}
]
}
]
});
$scope.onClick = function(e) {
alert(1);
}
})
</script>
</body>
</html>
6 Answers, 1 is accepted
In order to pass the Authors in your scenario you need to use the following syntax for the ng-repeat:
<div ng-repeat="author in dataItem.Authors">Display FullName Here: {{author.FullName}}</div>And following is the modified dojo example:
Hope this helps.
Regards,
Konstantin Dikov
Telerik
Rank 2
Perfect. Now I have a different issue, when I try to use ng-click to link the name to a javascript function, as follows:
<a href="javascript:void(0);" ng-click="showAuthor('{{author.FriendlyPath}}');">{{author.FullName}}</a>When I "Inspect Element" on one of these links, it looks like the following:
<a href="javascript:void(0);" ng-click="showAuthor('ray_bradbury');" class="ng-binding">Ray Bradbury</a>but when it calls my javascript function
$scope.showAuthor = function (FriendlyPath) { alert(FriendlyPath); }it alerts with the value {{author.FriendlyPath}} instead of "ray_bradbury".
This can be seen in action at http://dojo.telerik.com/@larkydoo/aQeze
Any idea what may be happening?
Thanks again!
Laurie
​​
If you need to refer to the object from the ng-repeat within a JavaScript declaration (the ng-click handler), you should use access it directly (without "{{...}}"):
<div ng-repeat="author in dataItem.Authors"><a href="javascript:void(0);" ng-click="showAuthor(author.FriendlyPath);">{{author.FullName}}</a></div>Hope this helps.
Best Regards,
Konstantin Dikov
Telerik
Rank 2
Rank 1
I have a table
<div ng-controller="samCntrl">
<table id="clientGrid">
<thead>
<tr>
<th>Name</th>
<th>Comment</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script id="template" type="text/x-kendo-template">
<tr>
<td>#= name #</td>
<td>#= comment #</td>
<td>
<md-button class="md-icon-button" ng-click="sample(profile)">
<md-icon class="md-primary">linked_camera</md-icon>
<md-tooltip md-direction="bottom" md-delay="250">Sample</md-tooltip>
</md-button>
<input type="button" value="asds" ng-click="sample(profile)" />
</td>
</tr>
</script>
</div>
function load() {
var template = kendo.template($("#template").html());
$("#clientGrid").kendoGrid({
sortable: true,
});
In my controller, I set the dataSource
.then(function (response) {
var dataSource = new kendo.data.DataSource({
data: response.sampleData,
change: function () {
$("#clientGrid tbody").html(kendo.render(template, this.view()));
}
});
dataSource.read();
};
The md-button doesnt load and also the click function doesnt work. Do we need to include anything else for the md-button to load. The button doest appear. And the click also doesnt work.
You will have to use $compile for dynamic templates. For a $compile example, please refer to the following HowTo:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik