Search code examples
javascriptangularjsangularjs-directiveangularjs-ng-repeatangular-directive

Why isn't list of elements showing up?


I am working on an AngularJS tutorial

This tutorial covers the ng-repeat directive, an AngularJS directive used repeating data.

To show an example of ng-repeat, The author enters periodic table elements in a JSON format, covering element's name, element #, etc into controller logic($scope)

To display the elements(code below), the author simply used the directive with a html un-ordered list

<ul>
  <li data-ng-repeat="element in periodic.elements">{{element.name}} </li>
</ul>

I tried doing the same JsFiddle but the list of elements isn't showing up, only {{element.name}}

At first I thought this was an AngularJS syntax issue but I checked over the scope attribute, if the controller names match, etc.... I made sure to enable the AngularJS option in JsFiddle as well.

Does anyone know what the issue is or why this list isn't showing up?


Solution

  • You forget completing controller sytax '});' at the end of the code.

    'use strict';
    var chemistryApp = angular.module('chemistryApp', []);
    
    chemistryApp.controller(
          'chemistryController',
        function chemistryController($scope) {
            $scope.periodic = {elements: [
                {
                    "atomicNumber": 1,
                    "name": "Hydrogen",
                    "atomicWeight": 1.00794,
                    "phase": "Gas",
                    "ionization": 13.5984,
                    "melting": -259.15,
                    "boiling": -252.87
                },
                {
                    "atomicNumber": 2,
                    "name": "Helium",
                    "atomicWeight": 4.002602,
                    "phase": "Gas",
                    "ionization": 24.5874,
                    "melting": 0,
                    "boiling": -268.93
                },
                {
                    "atomicNumber": 3,
                    "name": "Lithium",
                    "atomicWeight": 6.941,
                    "phase": "Solid",
                    "ionization": 5.3917,
                    "melting": 180.54,
                    "boiling": 1342
                }
            ]
           };
        });
    

    Working Fiddle