Load Initial Image to Page AngularJS

Question

I have a list of names from the model that are listed on the page when the page loads. When i click the name, the corresponding image from the model appears on the page. Is there a way within this to load an initial image [0]when the page loads? This could be a random image or the first image in the model data set.

<!DOCTYPE html>
<html ng-app = "myApp"><head>
    <meta charset="UTF-8">
    <title>Cat Clicker</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel ="stylesheet" type "text/css" href ="clicker.css">

    <script type = "text/javascript" src="Libs/angular.js"></script>
    <script type = "text/javascript" src="js/CatClickerMe.js"></script>
<body>

<div ng-controller = "MainController as vm">

  <div ng-repeat = "cat in vm.options.catList">


    <h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>

    </div>
    <hr>


  <h3>{{vm.selectedCat.name}}</h3>



  <img ng-src ="{{vm.selectedCat.images}}">
  </div>

  </div>

</div>
</body>
</html>

JS

"use strict";


angular.module('myApp',[]);

angular.module('myApp').controller('MainController', function($scope) {
  var vm = this;

   vm.selectCat=selectCat;

vm.options = {

   catList:[

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg'
  }
],
};

function selectCat(pos) {
  vm.selectedCat = pos;
};


});

What about initializing vm.selectedCat to the item you would like to show as first? — brazorf
– brazorf, Commented Sep 21, 2018 at 21:37
Tried adding this to the modelvm.selectedCat = {src:vm.options.catList.images[0]} — Ginger22
– Ginger22, Commented Sep 22, 2018 at 1:11
...And i get undefined. Also tried similarly in the html without success. Do you have an example of how this would work? — Ginger22
– Ginger22, Commented Sep 22, 2018 at 1:12

Anil Sarkar · Accepted Answer · 2018-09-22 07:03:13Z

1

Load first image by setting vm.selectedCat just below vm.options

vm.selectedCat = vm.options.catList[0];

Below is the jsfiddle link for your reference

jsfiddle : https://jsfiddle.net/Lpaudwf8/21/

answered Sep 22, 2018 at 7:03

Anil Sarkar

1609 bronze badges

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

1 Comment

Ginger22 Over a year ago

Perfect. Thank you immensely.

himadri · Accepted Answer · 2018-09-22 06:59:20Z

1

Can you Try this :-

"use strict";
angular.module('myApp',[]);

angular.module('myApp').controller('MainController', function($scope) {
  var vm = this;

   vm.selectCat=selectCat;

vm.options = {

   catList:[

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg'
  }
],
};

function selectCat(pos) {
  vm.selectedCat = pos;
};
function Init(){
   vm.selectedCat = vm.options.catList[0];
}

Init();

});

answered Sep 22, 2018 at 6:59

himadri

6386 silver badges19 bronze badges

Collectives™ on Stack Overflow

Load Initial Image to Page AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related