How to implement ng-repeat inside Template

7 posts, 2 answers
  1. Laurie
    Laurie avatar
    146 posts
    Member since:
    Feb 2007

    Posted 19 Oct 2015 Link to this post

    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>

  2. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 21 Oct 2015 Link to this post

    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!
     
  3. Laurie
    Laurie avatar
    146 posts
    Member since:
    Feb 2007

    Posted 21 Oct 2015 in reply to Konstantin Dikov Link to this post

    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

    ​​

  4. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 23 Oct 2015 Link to this post

    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!
     
  5. Laurie
    Laurie avatar
    146 posts
    Member since:
    Feb 2007

    Posted 23 Oct 2015 Link to this post

    Perfect!  Thanks!
  6. Anish
    Anish avatar
    1 posts
    Member since:
    Nov 2017

    Posted 15 Oct 2018 Link to this post

    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.

     

     

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 17 Oct 2018 Link to this post

    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.
Back to Top