How to implement ng-repeat inside Template

5 posts, 2 answers
  1. Laurie
    Laurie avatar
    141 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
    1803 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. Kendo UI is VS 2017 Ready
  4. Laurie
    Laurie avatar
    141 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

    ​​

  5. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 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!
     
  6. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 23 Oct 2015 Link to this post

    Perfect!  Thanks!
Back to Top
Kendo UI is VS 2017 Ready