Angular JS - Ng-Repeat issue

Question

I am defining my array as shown:

$scope.tt=  [
  {
    "name" : "1",
    "sel" : false
  },
  {
    "name" : "2",
    "sel" : false
  },
  {
    "name" : "3",
    "sel" : false
  }
];

And showing in my view as so:

<div ng-repeat="mod in tt" ng- class="t text-center">
    <img src="images/tt/{{mod.name}}.png"/>
    <span class="tt">{{mod.name}}</span>

    <div class="overlay" ng-show="mod.sel">

      <div class="range-slider" data-slider data-options="start: 1; end: 10;">
        <span class="range-slider-handle" role="slider" tabindex="0"></span>
        <span class="range-slider-active-segment"></span>
        <input type="hidden">
      </div>

      <button>Ok</button>
      <button>Cancel</button>
    </div>


</div>

It works and shows all three of my items name and the related image but then errors:

GET http://localhost:63342/tt/images/tt/%7B%7Bmod.name%7D%7D.png 404 (Not Found)

As if there is 4 items rather than 3?

What could cause this?

Gazler · Accepted Answer · 2015-02-11 14:27:40Z

3

This error is happening because your src is being loaded by the browser before angular kicks in and interpolates the variable. This means that the{{mod.name}} is being interpreted literally and results in the URL that 404s when you try to load it.

You should use ng-src instead. https://docs.angularjs.org/api/ng/directive/ngSrc

edited Feb 11, 2015 at 14:27

answered Feb 11, 2015 at 14:15

Gazler

84.4k18 gold badges285 silver badges245 bronze badges

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

Comments

Omri Aharon · Accepted Answer · 2015-02-11 14:15:51Z

2

You should be seeing about 3 errors, one per item.

The reason is that you use src instead of ng-src, hence the browser immediately tries to fetch the image. Change to:

<img ng-src="images/tt/{{mod.name}}.png"/>

answered Feb 11, 2015 at 14:15

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

Angular JS - Ng-Repeat issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related