Data is not populating from list in angular js

Question

I am new to angular js and I'm having an issue. My repeat code is

<div id="list" ng-controller="Controller">
    <ul class="list-group">
         <li class="list-group-item" ng-repeat="item in username">
             <div>
                 <h2 class="list-group-item-heading">{{item.name}}</h2>
                 <h3 class="list-group-item-heading">{{item.un}}</h3>
             </div>
          </li>
    </ul>
</div>

And my controller is :

var myApp = angular.module('myApp',[]);

myApp.controller('Controller',function Controller($login) {
    $login.username=[
    {
        "name":"Dr. Sarfaraz",
        "un":"[email protected]",
        "pass":"12345212e2"
    },
    {
        "name":"Dr. Abdullah",
        "un":"[email protected]",
        "pass":"13e45212e2"
    },
    {
        "name":"admin",
        "un":"[email protected]",
        "pass":"*2345*12e2"
    }
]; });

When I run this code, the data is not populated from the list. Can anybody help me to solve this problem....:)

$login should be $scope, or ['$scope', function Controller($login){, or use as syntax and this.username=[ — Grundy
– Grundy, Commented Jul 9, 2015 at 11:21

Bhojendra Rauniyar · Accepted Answer · 2015-07-09 11:23:35Z

2

Pass value in $scope instead of $login:

,function Controller($login, $scope){
$scope.username=[

I can think you're replacing $scope with $login. In angularjs, the variable name should be exact if you want to use $scope you don't rename it to anything else.

answered Jul 9, 2015 at 11:23

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

Comments

Grundy · Accepted Answer · 2015-07-09 12:10:01Z

few solutions:

$login should be $scope

myApp.controller('Controller', function Controller($scope) {
  $scope.username = [{
    "name": "Dr. Sarfaraz",
    "un": "[email protected]",
    "pass": "12345212e2"
  }, {
    "name": "Dr. Abdullah",
    "un": "[email protected]",
    "pass": "13e45212e2"
  }, {
    "name": "admin",
    "un": "[email protected]",
    "pass": "*2345*12e2"
  }];
});

['$scope', function Controller($login){,

myApp.controller('Controller', ['$scope',
  function Controller($login) {
    $login.username = [{
      "name": "Dr. Sarfaraz",
      "un": "[email protected]",
      "pass": "12345212e2"
    }, {
      "name": "Dr. Abdullah",
      "un": "[email protected]",
      "pass": "13e45212e2"
    }, {
      "name": "admin",
      "un": "[email protected]",
      "pass": "*2345*12e2"
    }];
  }
]);

use as syntax and this.username=[

myApp.controller('Controller', function Controller() {
  this.username = [{
    "name": "Dr. Sarfaraz",
    "un": "[email protected]",
    "pass": "12345212e2"
  }, {
    "name": "Dr. Abdullah",
    "un": "[email protected]",
    "pass": "13e45212e2"
  }, {
    "name": "admin",
    "un": "[email protected]",
    "pass": "*2345*12e2"
  }];
});

and in html ng-controller="Controller as ctrl" and ng-repeat="item in ctrl.username"

as you can see in next snippet - all solutions works, and if you not see any errors in console, so probably you forget add ng-app attribute.

var myApp = angular.module('myApp', []);

myApp.controller('Controller', function Controller($scope) {
  $scope.username = [{
    "name": "Dr. Sarfaraz",
    "un": "[email protected]",
    "pass": "12345212e2"
  }, {
    "name": "Dr. Abdullah",
    "un": "[email protected]",
    "pass": "13e45212e2"
  }, {
    "name": "admin",
    "un": "[email protected]",
    "pass": "*2345*12e2"
  }];
});

myApp.controller('Controller2', ['$scope',
  function Controller($login) {
    $login.username = [{
      "name": "Dr. Sarfaraz",
      "un": "[email protected]",
      "pass": "12345212e2"
    }, {
      "name": "Dr. Abdullah",
      "un": "[email protected]",
      "pass": "13e45212e2"
    }, {
      "name": "admin",
      "un": "[email protected]",
      "pass": "*2345*12e2"
    }];
  }
]);

myApp.controller('Controller3', function Controller() {
  this.username = [{
    "name": "Dr. Sarfaraz",
    "un": "[email protected]",
    "pass": "12345212e2"
  }, {
    "name": "Dr. Abdullah",
    "un": "[email protected]",
    "pass": "13e45212e2"
  }, {
    "name": "admin",
    "un": "[email protected]",
    "pass": "*2345*12e2"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="myApp">
  <div id="list" ng-controller="Controller">
    First:
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="item in username">
        <div>
          <h2 class="list-group-item-heading">{{item.name}}</h2>
          <h3 class="list-group-item-heading">{{item.un}}</h3>
        </div>
      </li>
    </ul>
  </div>

  <div id="list" ng-controller="Controller2">
    Second:
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="item in username">
        <div>
          <h2 class="list-group-item-heading">{{item.name}}</h2>
          <h3 class="list-group-item-heading">{{item.un}}</h3>
        </div>
      </li>
    </ul>
  </div>

  <div id="list" ng-controller="Controller3 as ctrl">
    third:
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="item in ctrl.username">
        <div>
          <h2 class="list-group-item-heading">{{item.name}}</h2>
          <h3 class="list-group-item-heading">{{item.un}}</h3>
        </div>
      </li>
    </ul>
  </div>
</div>

doe · Accepted Answer · 2015-07-09 11:29:08Z

0

var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $http) {
$scope.username=[{//data}]
});

answered Jul 9, 2015 at 11:29

doe

1486 silver badges25 bronze badges

Comments

alifirat · Accepted Answer · 2015-07-09 11:35:35Z

0

The following code works for me. Don't forget to set the ng-app in the div attributes and inject '$scope' before to use as argument of your controller.

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

<div ng-app="myApp" id="list" ng-controller="Controller">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="item in username">
            <div>
                <h2 class="list-group-item-heading">{{item.name}}</h2>
                <h3 class="list-group-item-heading">{{item.un}}</h3>
            </div>
        </li>
    </ul>
</div>

<script>
var myApp = angular.module('myApp', []);

myApp.controller('Controller', ['$scope', function ($scope) {
    $scope.username = [{
        "name": "Dr. Sarfaraz",
        "un": "[email protected]",
        "pass": "12345212e2"
    }, {
        "name": "Dr. Abdullah",
        "un": "[email protected]",
        "pass": "13e45212e2"
    }, {
        "name": "admin",
        "un": "[email protected]",
        "pass": "*2345*12e2"
    }];
}]);

</script>

</body>
</html>

answered Jul 9, 2015 at 11:35

alifirat

2,9671 gold badge19 silver badges35 bronze badges

3 Comments

alifirat Over a year ago

When I launch this code on a web-browser, it's working so If you can copy the log error, I will see what's the problem.

Waleed Over a year ago

there is no error the output is {{item.name}} {{item.un}} this on browser

alifirat Over a year ago

Look what I'm getting : jsfiddle.net/9rmfk1mj. And you should look in the console of your browser, maybe be there is some errors logged into it.

Collectives™ on Stack Overflow

Data is not populating from list in angular js

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related