Simple scope property and an array of strings used with ng repeat not displaying

Question

I’ve been having a problem with a scope property in my controller – a simple test title and an array of strings used with ng repeat. They are not being displayed on the screen when served up from our rather complex server. Note that with ng repeat it seems to know the size of the array, just doesn’t display it, see first example below.

They are being displayed correctly when served up from apps like codepen or plunker. It also works when I run it on localhost using a simple server. See working version in 2nd example below.

I know responders will protest that they cannot help without more specific information about our server - but I'm guess I'm asking specifically:

Have you seen a case where ng repeat seems to know the size of the array, but just doesn’t display the items in the array - if so what caused it?
What types of issues with our server do you think could cause this? What should I be looking for..

Non working example from our server

Working example from codepen or simple server on localhost

var app = angular.module('testApp', []);
angular.module('testApp').controller('AuthorizePageCtrl', ['$scope', function ($scope) {

    'use strict';

    $scope.mytesttitle = "this is a test";

    $scope.myitems = [
        "Alfreds Futterkiste",
        "Berglunds snabbköp",
        "Centro_comercial Moctezuma"
    ];

}]);

<!DOCTYPE html>
<html data-ng-app="testApp">

<head>
    <meta charset="utf-8" />
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="/js/controllers/AuthorizePageCtrl.js"></script>
</head>

<body>

<div id="consent" ng-app="testApp">

    <div ng-controller="AuthorizePageCtrl">
        <h3>My test title should appear->{{mytesttitle}}</h3>

        <div>
            <ul>
                <li ng-repeat="myitem in myitems">"myitem in myitems should appear->"{{myitem}}</li>
            </ul>
        </div>

        <div  ng-repeat="myitem in myitems">
            <h2>"myitem in myitems should appear->"{{myitem}}</h2>
        </div>
    </div>
</div>

</body>

</html>

What happens if you do something like <span ng-bind="myitem"></span instead of {{myitem}} ? Also, what do you see when you inspect the markup? — o4ohel
– o4ohel, Commented Nov 6, 2017 at 7:02
Hmm that's really odd did you check the callback function if it got the data ? — code.cycling
– code.cycling, Commented Nov 6, 2017 at 7:11

Pranjal Bikash Das · Accepted Answer · 2017-11-06 08:13:49Z

so first data-ng-app and ng-app they are the same. and you only need one. and for the JS i may this changes and it works for me.

Angular part:

var app = angular.module('app', []);
app.controller('AuthorizePageCtrl', ['$scope', function ($scope) {

$scope.mytesttitle = "this is a test";

$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);

HTML part:

<!DOCTYPE html>
<html ng-app="app">

<head>
<meta charset="utf-8" />
<script  src="//code.angularjs.org/1.6.6/angular.js" ></script>
<script  src="app.js" ></script>
</head>

<body>

<div id="consent" >

<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>

    <div>
        <ul>
            <li ng-repeat="myitem in myitems">"myitem in myitems 
 should appear->"{{myitem}}</li>
        </ul>
    </div>

    <div  ng-repeat="myitem in myitems">
        <h2>"myitem in myitems should appear->"{{myitem}}</h2>
    </div>
  </div>
   </div>

 </body>

 </html>`enter code here`

rogsco · Accepted Answer · 2017-11-21 16:35:46Z

0

So it turns out web site uses swig which conflicts with angularjs.

It uses swig for template var which was conflicting with angularjs' use of {{}}, preventing this very simple example from working. Thanks for responses ....

See this other fix for swig/angular conflict if you don't want to use ng-bind

edited Nov 21, 2017 at 16:35

answered Nov 7, 2017 at 14:00

rogsco

12 bronze badges

1 Comment

rogsco Over a year ago

Oh yea simple fix is just to use ng-bind instead of {{}}.

Collectives™ on Stack Overflow

Simple scope property and an array of strings used with ng repeat not displaying

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related