ng-repeat is not working with ng-app value

Question

ng-repeat is not working with ng-app value

100 views Asked by M.S.Naidu At 19 September 2024 at 18:51

The directive ng-repeat is not working properly when we give ng-app="MyApp" and which is working without passing any value to the ng-app directive which is a strange behaviour to me. I am new to the AngularJS. Is this behaviour expected?

Please throw some light on this.

<!DOCTYPE html>
<html>
  <head>
    <title>Books Buddy</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-app="MyApp">
    <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
      <ul>
        <li ng-repeat="book in books">{{book}}</li>
      </ul>
    </div>
  </body>
</html>

Original Q&A

There are 4 answers

**Akshay Kumar** · Answer 1 · 2016-02-15 11:29:33

This is your way (here we are doing every thing in html only so we don't need custom app.. we can just say "hey angular just do what you can do with things")

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app>
 <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <ul>
   <li ng-repeat="book in books">{{book}}
   </li>
 </ul>
 </div>
</body>
</html>

This is a correct way (in this we are declaring our own app so we need to set a name for our app..)

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<body ng-app = "myApp">
 <div ng-controller="mainCtrl">
 <ul>
   <li ng-repeat="book in books">{{book}}</li>
 </ul>
 </div>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("mainCtrl", function($scope){
        $scope.books = ['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava'];
    });

</script>
</html>

**ojus kulkarni** · Answer 2 · 2016-02-15 12:04:12

Use ng-model on books, and here there is no need to wright ng-app="myApp"because You are not initializing you app seperately, above code is not that dynamic so you can use ng-app directly

Try this :

<!DOCTYPE html>
<html>
<head>
<title>Books Buddy</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">    </script>
</head>
<body ng-app >
<div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <div ng-model="books" >
  <ul ng-repeat="book in books" >
    <li>{{book}}</li>
  </ul>
</div>
</div>
</body>
</html>

**Paresh Gami** · Answer 3 · 2016-02-15 11:25:26

Just male ng-app='' it should work

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<body ng-app="">
 <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <ul>
   <li ng-repeat="book in books">{{book}}
   </li>
 </ul>
 </div>
</body>
</html>

**Luka Jacobowitz** · Answer 4 · 2016-02-15 11:26:03

When using only ngInit and no controllers, directives or services, you don't need the ngApp. That's how angular works. If you're specifying MyApp as your ngApp angular won't be able to find it and then you get your error.

TechQA.

ng-repeat is not working with ng-app value

There are 4 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in NG-APP

Popular Questions

Popular Tags

Trending Questions