Content is not showing using angular.js

Question

<html ng-app = "sampleMod">
    <head>

    </head>

    <body ng-controller = "sampleCon">
        <script src = "bower_components/angular/angular.min.js"></script>
        <h1>Filters example</h1>
        Comments (upper) :- <input type = "text" ng-model = "sampleCon.upper"><br>
        {{sampleCon.upper | uppercase}}<br>
        Comments (lower) :- <input type = "text" ng-model = "sampleCon.lower"><br>
        {{sampleCon.lower | lowercase}}<br>
        <button type = "button">Name</button>
        <button type = "button">Age</button>
        <div>
            <ul>
                <li ng-repeat = "person in sampleCon.array1">
                    <b>Name</b> - {{person.name}}<br>
                    <b>Age</b> - {{person.age}}<br><br>
                </li>
            <ul>
        </div>

        <script>
            app = angular.module("sampleMod",[]);
            app.controller("sampleCon",function(){
                this.upper = "";
                this.lower = "";
                this.array1 = [{name:"sahib",
                              age:17},
                              {name:"kukku",
                              age:25},
                              {name:"meena",
                              age:45},
                              {name:"ayaan",
                              age:2},
                             ]
            });
        </script>
    </body>
</html>

I made a web page using angular js ,everything seems to work fine but the content having the ng-repeat directive was not visible on the screen .I am not able to detect any error the above program

when you mark answer give priority for the ones who answers fast — Sajeetharan
– Sajeetharan, Commented Sep 28, 2016 at 19:27

taguenizy · Accepted Answer · 2016-09-28 13:03:11Z

1

Remove sampleCon everywhere in your HTML except in ng-controller = "sampleCon"

sampleCon.upper to upper
sampleCon.lower to lower
sampleCon.array1 to array1

Or just do ng-controller = "sampleCon as sampleCon"

answered Sep 28, 2016 at 13:03

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Teja · Accepted Answer · 2016-09-28 12:56:54Z

1

Instead of

<li ng-repeat = "person in sampleCon.array1">
                    <b>Name</b> - {{person.name}}<br>
                    <b>Age</b> - {{person.age}}<br><br>
                </li>

use

<li ng-repeat = "person in array1">
                    <b>Name</b> - {{person.name}}<br>
                    <b>Age</b> - {{person.age}}<br><br>
                </li>

answered Sep 28, 2016 at 12:56

Ravi Teja

1,1058 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:48:29Z

As other answers correctly mentioned you can use $scope instead of this in your controller. Alternatively you can use the controller as-syntax.

</head>

<body ng-controller = "sampleCon as ctrl"> <!-- Name your controller 'ctrl' -->
    <script src = "bower_components/angular/angular.min.js"></script>
    <h1>Filters example</h1>
    Comments (upper) :- <input type = "text" ng-model = "ctrl.upper"><br>
    {{ctrl.upper | uppercase}}<br>
    Comments (lower) :- <input type = "text" ng-model = "ctrl.lower"><br>
    {{ctrl.lower | lowercase}}<br>
    <button type = "button">Name</button>
    <button type = "button">Age</button>
    <div>
        <ul>
            <li ng-repeat = "person in ctrl.array1">
                <b>Name</b> - {{person.name}}<br>
                <b>Age</b> - {{person.age}}<br><br>
            </li>
        <ul>
    </div>

    <script>
        app = angular.module("sampleMod",[]);
        app.controller("sampleCon",function(){
            var vm = this;
            vm.upper = "";
            vm.lower = "";
            vm.array1 = [{name:"sahib",
                          age:17},
                          {name:"kukku",
                          age:25},
                          {name:"meena",
                          age:45},
                          {name:"ayaan",
                          age:2},
                         ]
        });
    </script>
</body>

smoksnes · Accepted Answer · 2016-09-28 13:09:31Z

Use $scope variable instead of this,

$scope.upper = "";
$scope.lower = "";
$scope.array1 = [{name:"sahib",
                              age:17},
                              {name:"kukku",
                              age:25},
                              {name:"meena",
                              age:45},
                              {name:"ayaan",
                              age:2},
                             ]

and HTML should be,

 <h1>Filters example</h1>
        Comments (upper) :- <input type = "text" ng-model = "upper"><br>
        {{upper | uppercase}}<br>
        Comments (lower) :- <input type = "text" ng-model = "lower"><br>
        {{lower | lowercase}}<br>
  <div>
        <ul>
            <li ng-repeat = "person in array1">
                <b>Name</b> - {{person.name}}<br>
                <b>Age</b> - {{person.age}}<br><br>
            </li>
        <ul>
    </div>

DEMO

Lalji Tadhani · Accepted Answer · 2016-09-28 13:09:49Z

0

app.controller("sampleCon",function($scope){
     $scope.upper = "";
     $scope.lower = "";
     $scope.array1 = [{name:"sahib",
                        age:17},
                              {name:"kukku",
                              age:25},
                             ]
   });

Use the $scope, and html like

 <li ng-repeat = "person in array1">
                <b>Name</b> - {{person.name}}<br>
                <b>Age</b> - {{person.age}}<br><br>
            </li>

edited Sep 28, 2016 at 13:09

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

answered Sep 28, 2016 at 13:03

dinesh

1812 silver badges13 bronze badges

Collectives™ on Stack Overflow

Content is not showing using angular.js

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related