CODEWITHSUNDEEP
javascripthtmlangularjs
Mike L
Mike L

Reputation: 41

AngularJS expression not being processed

I'm simply having trouble figuring out why the angular expressions aren't being displayed when I try and view them on a browser. I'm trying to embed an ng-repeat into an unordered list, however the html shows as:

{{country.name}}

{{city.name}}

This is what I have:

<!doctype html>
<html>
  <head>
    <script src="Scripts\angular.js"></script>
    <script src="Scripts\script.js"></script>
  </head>
  <body ng-app="myModule" style="font-family:Arial">
    <div ng-controller="myController">
      <ul>
          <li ng-repeat="country in countries">
              {{country.name}}
                  <ul>
                    <li ng-repeat="city in country.cities">
                        {{city.name}}
                    </li>
                  </ul>
          </li>
      </ul>
    </div>
  </body>
</html>




var myApp = angular
                  .module("myModule", [])
                  .controller("myController", function($scope) {
                      var countries = [
                        {
                          name: "UK",
                          cities: [
                              { name: "London" },
                              { name: "Manchester" },
                              { name: "Portsmouth" }
                          ]
                        },
                        {
                          name: "USA",
                          cities: [
                              { name: "New York" },
                              { name: "Trenton" },
                              { name: "Philidelphia" }
                          ]
                        },
                        {
                          name: "Poland"
                          cities: [
                              { name: "Warsaw" },
                              { name: "Poznan" },
                              { name: "Lodz" }
                          ]
                         }
                      ];
                          $scope.countries = countries;
                      });

Upvotes: 1

Views: 70

Answers (1)

Deep
Deep

Reputation: 9794

you are missing , after poland

 name: "Poland"

Fix this and everything should be OK

var myApp = angular.module("myModule", []).controller("myController", function($scope) {
  
  
  var countries = [{
    name: "UK",
    cities: [{
      name: "London"
    }, {
      name: "Manchester"
    }, {
      name: "Portsmouth"
    }]
  }, {
    name: "USA",
    cities: [{
      name: "New York"
    }, {
      name: "Trenton"
    }, {
      name: "Philidelphia"
    }]
  }, {
    name: "Poland",
    cities: [{
      name: "Warsaw"
    }, {
      name: "Poznan"
    }, {
      name: "Lodz"
    }]
  }];
  $scope.countries = countries;
});
<!doctype html>
<html>

<head>
   <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>

</head>

<body ng-app="myModule" style="font-family:Arial">
  <div ng-controller="myController">
    <ul>
      <li ng-repeat="country in countries">
        {{country.name}}
        <ul>
          <li ng-repeat="city in country.cities">
            {{city.name}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

</html>

Upvotes: 3

Related Questions