Azhar Ch Azhar Ch - 3 months ago 14
AngularJS Question

angularjs not working in my code

**Angular js code**


i have added module and a controller but its not working.kindly point out my errors so i can remove them.

var app=angular.module("hello",[]);
app.controller("func",function()
{
this.products=gems;
});
var gems=[
name:Azhar,
gpa:2.8,
institute:UCP
];

**html code**


//html code of what i have done so far.

<script src="angular.min.js"></script>
<script src="world.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />

<html>
<body ng-app="hello">
<div ng-controller="func">

{{products.name}};


</div>


</body>

</html>

Answer

there are a few things you need to fix:

  1. change gems from Array to Object
  2. set $scope.products instead of this.products
  3. assign gems to $scope.products only after it is defined
  4. set string values of gems using quotation marks

here is a working example after these fixes:

var gems = {
  name:'Azhar',
  gpa:2.8,
  institute:'UCP'
};
var app=angular.module("hello",[]);
app.controller("func", function($scope){
  $scope.products=gems;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="hello">
  <div ng-controller="func">
    {{products.name}};
  </div>
</div>

Comments