CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Agent Zebra
Agent Zebra

Reputation: 4550

simple angular example not working

I've duplicated an angular example from w3schools (here), and it's not working. I don't understand why. It looks like it should be working fine. What am I doing wrong?

Here's a plunker of my experiment

Here's the angular JS:

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
    $scope.things = [
       {title: 'my title 1', content: 'my Content 1'},  
        title: 'my title 2', content: 'my Content 2'}, 
        title: 'my title 3', content: 'my Content 3'}, 
        title: 'my title 4', content: 'my Content 4'},  
        title: 'my title 5', content: 'my Content 5'},
        title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
       {title: 'my 2nd title 1', content: 'my Content 1'},  
        title: 'my 2nd title 2', content: 'my Content 2'}, 
        title: 'my 2nd title 3', content: 'my Content 3'}, 
        title: 'my 2nd title 4', content: 'my Content 4'},  
        title: 'my 2nd title 5', content: 'my Content 5'},
        title: 'my 2nd title 6', content: 'my Content 6'}
        ];
});

Here's the HTML:

    <!DOCTYPE html>
<html>

  <head>

     <!-- CSS  -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- JS  -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  </head>

<body>  

    <div ng-app="myApp" ng-controller="thingsCtrl">
        <h1>Hello Plunker!</h1>



      <div class="container">   
          <div class="row">

            <div class="col-sx-6"><h4>My Subtitle</h4>
                <div ng-repeat="x in things"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

            <div class="col-sx-6"><h4>My Subtitle</h4>
                <div ng-repeat="x in things2"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

          </div>
      </div> 

    </div>     

    <script src="script.js"></script>     

      </body>

    </html>

Upvotes: 0

Views: 88

Answers (4)

ODelibalta
ODelibalta

Reputation: 2254

You need to tell angular order of dependencies. You want the $scope injected to so you mention that to angular. for example, if I wanted to inject the $q as well, I would add that to the list as such .controller('thingsCtrl', ['$scope', '$q', function($scope, $q) { ... }]); Code below should work fine

angular.module('myApp', [])
.controller('thingsCtrl', ['$scope', function($scope) {
    $scope.things = [
        {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
        {title: 'my 2nd title 1', content: 'my Content 1'},  
        {title: 'my 2nd title 2', content: 'my Content 2'}, 
        {title: 'my 2nd title 3', content: 'my Content 3'}, 
        {title: 'my 2nd title 4', content: 'my Content 4'},  
        {title: 'my 2nd title 5', content: 'my Content 5'},
        {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
}]);

Upvotes: 0

Mike
Mike

Reputation: 1316

I notice that your object array syntax is incorrect, missing a curly brace before each object.

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
  $scope.things = [
   {title: 'my title 1', content: 'my Content 1'},  
    {title: 'my title 2', content: 'my Content 2'}, 
    {title: 'my title 3', content: 'my Content 3'}, 
    {title: 'my title 4', content: 'my Content 4'},  
    {title: 'my title 5', content: 'my Content 5'},
    {title: 'my title 6', content: 'my Content 6'}
    ];

  $scope.things2 = [
   {title: 'my 2nd title 1', content: 'my Content 1'},  
    {title: 'my 2nd title 2', content: 'my Content 2'}, 
    {title: 'my 2nd title 3', content: 'my Content 3'}, 
    {title: 'my 2nd title 4', content: 'my Content 4'},  
    {title: 'my 2nd title 5', content: 'my Content 5'},
    {title: 'my 2nd title 6', content: 'my Content 6'}
    ];
});

Upvotes: 1

JBux
JBux

Reputation: 1404

You're not opening another key/value array for each item in your list.

    {title: 'my title 2', content: 'my Content 2'}, 
    title: 'my title 3', content: 'my Content 3'},

Try:

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
    $scope.things = [
       {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
       {title: 'my 2nd title 1', content: 'my Content 1'},  
       {title: 'my 2nd title 2', content: 'my Content 2'}, 
       {title: 'my 2nd title 3', content: 'my Content 3'}, 
       {title: 'my 2nd title 4', content: 'my Content 4'},  
       {title: 'my 2nd title 5', content: 'my Content 5'},
       {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
});

Oh, and check the console error:

Error: [ng:areq] Argument 'myCtrl' is not a function, got undefined

Your myApp controller is incorrect.

Upvotes: 3

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You have specified wrong controller in markup. Update

<div ng-app="myApp" ng-controller="myCtrl">

to

<div ng-app="myApp" ng-controller="thingsCtrl">

Upvotes: 4

Related Questions