This is a migrated thread and some comments may be shown as answers.
How to implement ng-repeat inside Template
6 Answers 99 Views
This is a migrated thread and some comments may be shown as answers.
Laurie
Top achievements
Rank 2
Laurie asked on 19 Oct 2015, 08:49 PM

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

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 21 Oct 2015, 07:18 AM
Hello Laurie,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Laurie
Top achievements
Rank 2
answered on 21 Oct 2015, 03:53 PM

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

​​

0
Accepted
Konstantin Dikov
Telerik team
answered on 23 Oct 2015, 09:04 AM
Hi 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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Laurie
Top achievements
Rank 2
answered on 23 Oct 2015, 08:00 PM
Perfect!  Thanks!
0
Anish
Top achievements
Rank 1
answered on 15 Oct 2018, 01:09 PM

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.

 

 

0
Konstantin Dikov
Telerik team
answered on 17 Oct 2018, 08:31 AM
Hi Anish,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Laurie
Top achievements
Rank 2
Answers by
Konstantin Dikov
Telerik team
Laurie
Top achievements
Rank 2
Anish
Top achievements
Rank 1
Share this question
or