CODEWITHSUNDEEP
javascriptangularjs
alon.a
alon.a

Reputation: 55

why my angular code doesnt work?

hey i am new with angular and i cant get it working i made a new project where i put the angular.min.js file to and this code doesnt work and i dont know why it shows nothing please help me understand why.

(function() {
  var app = angular.module('list', []);

app.controller('peopleListCtrl', function(){
  this.persons = plists;
});

var plists = [
             { name: 'alon', job: 'web dev', home:'nir tzvi' },
{ name: 'ben', job: 'katbamflighter', home:'nir tzvi' },
{ name: 'shiraz', job: 'dentist assistant', home:'hadera west' }
];
})();
<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl as ppl">
<br />
<div ng-repeat="people in ppl.persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
    <input type="text" />
<br />
</body>
  </html>

Upvotes: 1

Views: 94

Answers (4)

rupesh_padhye
rupesh_padhye

Reputation: 1405

Refer this for clarifications $scope vs this in AngularJS controller

see working code.

(function() {
  var app = angular.module('list', []);

app.controller('peopleListCtrl', ['$scope',function($scope){
  $scope.persons = plists;
}]);

var plists = [
             { name: 'alon', job: 'web dev', home:'nir tzvi' },
{ name: 'ben', job: 'katbamflighter', home:'nir tzvi' },
{ name: 'shiraz', job: 'dentist assistant', home:'hadera west' }
];
})();
<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl">
<br />
<div ng-repeat="people in persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
    <input type="text" />
<br />
</body>
  </html>

Upvotes: 3

&#211;scar G&#243;mez Alca&#241;iz
&#211;scar G&#243;mez Alca&#241;iz

Reputation: 1382

In addition to the answers above, if you really want to use the controller as syntax in order to use methods and variables belonging to the controller object as opposed as the classical $scope injection, you need to use a more modern version of AngularJS I am afraid.

Here's your code using AngularJS v1.4.7: http://plnkr.co/edit/FIrK0o8493k3VjDBSNtM?p=preview

Hope it adds some clarification!

Upvotes: 1

notAChance
notAChance

Reputation: 1430

Your ng-controller should just be peopleListCtrl not peopleListCtrl as ppl in your HTML.

You will also need to change this.persons to $scope.persons in your controller.

Then change your HTML to this :

<!DOCTYPE html>
<html ng-app="list">
<head>
 <script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">    </script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="peopleListCtrl as ppl">
<br />
<div ng-repeat="people in persons">
<h3>
 {{people.name}}
{{people.job}}
{{people.home}}
</h3>
  </div>
   <input type="text" />


Upvotes: 0

KnvpBE
KnvpBE

Reputation: 11

Try to replace this.persons with $scope.persons in the controller, the $scope will make sure you can use the data in your template.

app.controller('peopleListCtrl',['$scope', function($scope){
  $scope.persons = plists;
});

Upvotes: 0

Related Questions