CODEWITHSUNDEEP
javascriptangularjs
Khalid Talakshi
Khalid Talakshi

Reputation: 41

AngularJS - ng-repeat not working

I am trying to use angularJS to repeat div cards in rows of 3. However, it doesn't seem to be working. Rather than showing the cards in their rows, it shows pure html, where the object keywords in {{ }} are showing up plain. Here is all the relevant code.

Index.html

<!DOCTYPE html>
<html>
  <head ng-app="inLineClient">
    <meta charset="utf-8">
    <title>Client App | InLine</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="/src/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
    <script src="./src/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="#">InLine</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <span class="navbar-text">
          Welcome Back, User
        </span>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <h1 class="display-3">Current Conference: Conference</h1>
      </div>
      <div ng-controller="lineController as lineCtrl">
        <div class="row" ng-repeat="line in lineCtrl.linesList track by $index" ng-if="$index % 3 == 0">
            <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="lineCtrl.linesList[i] != null">
              <div class="card">
                <div class="card-header">
                  {{line.name}}
                </div>
                <div class="card-body">
                  <p class="card-text">{{line.description}}</p>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">Time: {{line.time}}</li>
                    <li class="list-group-item">Number of People: {{line.numPeople}}</li>
                    <li class="list-group-item"><a href="#" class="card-link">Card link</a></li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </body>
</html>

/src/app.js

angular.module('inLineClient', [])
.controller('lineController', function($scope) {
  $scope.linesList = [
    {
      name: 'Lunch',
      description: 'Lunch time! Come down for some pizza, french fries and drinks!\nPrice: $10 for Pizza, Fries, and a Soft Drink',
      time: new Date('October 21, 2017 12:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'VR Cave',
      description: 'Reserve your slot to play in our VR Cave',
      time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Breakfast',
      description: 'Good Morning! Bagels and Cream Cheese with Coffee, Tea and Hot Chocolate this morning!',
      time: new Date('October 22, 2017 8:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Intro to RESTful APIs by RBC',
      description: 'Learn about how to create REST APIs for your web application, brought to you by RBC',
      time: new Date('October 21, 2017 17:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Contest Programming',
      description: 'Get your programming on by competing among different hackers to win a prize!',
      time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    }
  ];
});

Any help is appreciated and comment if mroe info is needed. Full repo at https://github.com/khalid-talakshi/InLine

Upvotes: 0

Views: 418

Answers (2)

Arvind Pal
Arvind Pal

Reputation: 521

When using Controller AS syntax then to access the properties of controller one has to assign 'this' keyword to any other variable(in my case i have assigned this to vm) and then he/she can access the properties via that controller as variable //index.html

    <!DOCTYPE html>
    <html>
      <head >
        <meta charset="utf-8">
        <title>Client App | InLine</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="/src/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
        <script src="script.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

      </head>
      <body ng-app="inLineClient">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <a class="navbar-brand" href="#">InLine</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarText">
            <span class="navbar-text">
              Welcome Back, User
            </span>
          </div>
        </nav>
        <div class="container">
          <div class="row">

            <h1 class="display-3">Current Conference: Conference</h1>
          </div>
          <div ng-controller="lineController as lineCtrl">
            {{lineCtrl.name}}
            <div class="row" ng-repeat="line in lineCtrl.linesList track by $index" ng-if="$index % 3 == 0">
                <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="lineCtrl.linesList[i] != null">
                  <div class="card">
                    <div class="card-header">
                      {{line.name}}
                    </div>
                    <div class="card-body">
                      <p class="card-text">{{line.description}}</p>
                      <ul class="list-group list-group-flush">
                        <li class="list-group-item">Time: {{line.time}}</li>
                        <li class="list-group-item">Number of People: {{line.numPeople}}</li>
                        <li class="list-group-item"><a href="#" class="card-link">Card link</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>`enter code here`
      </body>
    </html>


//app.js

angular.module('inLineClient', [])
.controller('lineController', function($scope) {
  vm = this;
  vm.name = "arvind";
  vm.linesList = [
    {
      name: 'Lunch',
      description: 'Lunch time! Come down for some pizza, french fries and drinks!\nPrice: $10 for Pizza, Fries, and a Soft Drink',
      time: new Date('October 21, 2017 12:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'VR Cave',
      description: 'Reserve your slot to play in our VR Cave',
      time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Breakfast',
      description: 'Good Morning! Bagels and Cream Cheese with Coffee, Tea and Hot Chocolate this morning!',
      time: new Date('October 22, 2017 8:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Intro to RESTful APIs by RBC',
      description: 'Learn about how to create REST APIs for your web application, brought to you by RBC',
      time: new Date('October 21, 2017 17:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Contest Programming',
      description: 'Get your programming on by competing among different hackers to win a prize!',
      time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    }
  ];
});

here is plunker https://plnkr.co/edit/QTdxUFCIiumc2jA1sNXG?p=preview

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

You are using $scope in controller and using Controller as syntax in the HTML.

Follow either one way, In order to use $scope variable, change your HTML as,

<div ng-controller="lineController">
        <div class="row" ng-repeat="line in linesList track by $index" ng-if="$index % 3 == 0">
            <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="linesList[i] != null">
              <div class="card">
                <div class="card-header">
                  {{line.name}}
                </div>
                <div class="card-body">
                  <p class="card-text">{{line.description}}</p>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">Time: {{line.time}}</li>
                    <li class="list-group-item">Number of People: {{line.numPeople}}</li>
                    <li class="list-group-item"><a href="#" class="card-link">Card link</a></li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
      </div>

DEMO

// Code goes here

angular.module('inLineClient', [])
.controller('lineController', function($scope) {
$scope.message = "test";
  $scope.linesList = [
    {
      name: 'Lunch',
      description: 'Lunch time! Come down for some pizza, french fries and drinks!\nPrice: $10 for Pizza, Fries, and a Soft Drink',
      time: new Date('October 21, 2017 12:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'VR Cave',
      description: 'Reserve your slot to play in our VR Cave',
      time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Breakfast',
      description: 'Good Morning! Bagels and Cream Cheese with Coffee, Tea and Hot Chocolate this morning!',
      time: new Date('October 22, 2017 8:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Intro to RESTful APIs by RBC',
      description: 'Learn about how to create REST APIs for your web application, brought to you by RBC',
      time: new Date('October 21, 2017 17:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    },
    {
      name: 'Contest Programming',
      description: 'Get your programming on by competing among different hackers to win a prize!',
      time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
      numPeople: null
    }
  ];
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Client App | InLine</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</head>

<body  ng-app="inLineClient">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">InLine</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <span class="navbar-text">
          Welcome Back, User
        </span>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <h1 class="display-3">Current Conference: Conference</h1>
    </div>
    <div ng-controller="lineController">

      <div class="row" ng-repeat="line in linesList track by $index" ng-if="$index % 3 == 0">
        <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="linesList[i] != null">
          <div class="card">
            <div class="card-header">
              {{line.name}}
            </div>
            <div class="card-body">
              <p class="card-text">{{line.description}}</p>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">Time: {{line.time}}</li>
                <li class="list-group-item">Number of People: {{line.numPeople}}</li>
                <li class="list-group-item"><a href="#" class="card-link">Card link</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Related Questions