CODEWITHSUNDEEP
angularjs
Elavarasan M
Elavarasan M

Reputation: 192

Binding not works in angularjs

I am new to Angular, i am using Angular5.

I have productlist.js, having data in that file. Binded that data in the my html page, it's not working.

If i have the data in html file [ commented code in sample.html ], then it is working as expected.

productlist.js

angular.module('myShoppingList')
.controller('myCtrl', function ($scope) {


    $scope.products = ["Milk", "Bread", "Cheese"];

});

Sample.html

<div ng-app="myShoppingList" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in products">{{x}}</li>
    </ul>
</div>

I have added the productlist.js under the head in sample.html

Upvotes: 0

Views: 54

Answers (2)

zoint
zoint

Reputation: 108

When you add into html file, the following order of statement is important as well.

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="yourSampleScript.js"> </script>

Please take into consideration the abovementioned code snippet.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

You have few mistakes, you need to add empty dependencies to your module as follows,

angular.module('myShoppingList',[])

DEMO

angular.module('myShoppingList',[])
.controller('myCtrl', function ($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in products">{{x}}</li>
    </ul>
</div>

Upvotes: 3

Related Questions