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, Sep 28 '16 at 19:27

score 1 · Answer 1 · edited Sep 28 '16 at 13:09

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

score 1 · Answer 2 · answered Sep 28 '16 at 12:56

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>

score 1 · Answer 3 · edited May 23 '17 at 11:48

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>

score 1 · Accepted Answer · answered Sep 28 '16 at 13:03

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 '16 at 13:03

taguenizy

2,140
1
8
26

score 0 · Answer 5 · edited Sep 28 '16 at 13:09

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>

Content is not showing using angular.js

5 Answers5