Binding not works in angularjs

Question

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

btw this is not angular5. this is angularjs syntax

Sajeetharan
– Sajeetharan

2018-04-29 07:36:11 +00:00
Commented Apr 29, 2018 at 7:36 — Sajeetharan
– Sajeetharan, Commented Apr 29, 2018 at 7:36

Sajeetharan · Accepted Answer · 2018-04-29 07:35:45Z

3

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>

answered Apr 29, 2018 at 7:35

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Elavarasan M Over a year ago

thanks, how to change the above code into Angular5.. any links to learn ? Kindly help.. Thanks in advance..

Sajeetharan Over a year ago

there is no direct way to change to angular5 instead of rewriting it. You will use ngFor instead of ng-repeat. look the example here stackblitz.com/edit/…

zoint · Accepted Answer · 2018-04-29 07:43:58Z

0

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.

answered Apr 29, 2018 at 7:43

zoint

1082 silver badges16 bronze badges

Collectives™ on Stack Overflow

Binding not works in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related