angular ng-repeat and images in a row
Ad
In my view model I have an array of exactly 4 icon names.
If I place the 4 images like so:
<img ng-src="{{'/Content/img/' + vm.indicator[0]}}" alt="" />
<img ng-src="{{'/Content/img/' + vm.indicator[1]}}" alt="" />
<img ng-src="{{'/Content/img/' + vm.indicator[2]}}" alt="" />
<img ng-src="{{'/Content/img/' + vm.indicator[3]}}" alt="" />
they appear nicely in a row as desired.
However, when I use
<div ng-repeat="indicator in vm.indicator track by $index">
<img ng-src="{{'/Content/img/' + indicator}}" alt="" />
</div>
they appear below each other. (note: I need the "track by $index" bit because some icons have the same name).
I don't understand it. If I just place an empty div around the first code nothing changes. Why would the ng-repeat div change anything? And how can I make the two code snippets behave the same?
This is not a huge problem in my case because I always have exactly 4 icon names in my array. But what if the array was of variable length?
Ad
Answer
Ad
Put the ng-repeat in the img tag like so
<div >
<img ng-repeat="indicator in vm.indicator track by $index" ng-src="{{'/Content/img/' + indicator}}" alt="" />
</div>
That way you dont make multiple divs
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad