NG-Click not Loading Image AngularJS

Question

I have a simple model with a list of names and corresponding images. I'm trying to click on the name of the image and load the corresponding image. I can't get the image to load. The list of names appears on the page, but when I click them nothing happens. Please help with code. Thx!

<!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">

  <div ng-repeat = "cat in options.catList">
    <h3 ng-click = "MainController.selectCat($index)">{{cat.name}}</h3>

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

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

  </div>

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

JS

(function() {

"use strict";


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

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

$scope.options = {

   catList:[

{
  name:  'Fluffy',
  images: 'images/Fluffy.jpeg'
},
{
  name: 'Tabby',
  images: 'images/tabby.jpeg'
 }
],
};

vm.selectCat=function(pos) {
vm.selectedCat = angular.copy(vm.catList[pos]);
vm.selectedCat.pos = pos;
};

activate();

function activate() {

}

})

})();

Sajeetharan · Accepted Answer · 2018-09-21 02:13:21Z

1

You are mixing up $ scope and vm, go with one approach. You need to use controller as syntax in the template,

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

DEMO

(function() {

"use strict";


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

angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
 vm.selectCat = selectCat;
this.options = {
catList:[
{
  name:  'Fluffy',
  images: 'images/Fluffy.jpeg'
},
{
  name: 'Tabby',
  images: 'images/tabby.jpeg'
 }
],
};

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

})

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
    <meta charset="UTF-8">
    <title>Cat Clicker</title>
 
<body>

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

  <div ng-repeat = "cat in vm.options.catList">
    <h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>

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

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

  </div>

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

edited Sep 21, 2018 at 2:13

answered Sep 21, 2018 at 2:04

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

Ginger22 Over a year ago

I changed it all to vm using vm.catList etc. Now nothing loads on the page. Do you have an example of how i can make this work? Thank you.

Sajeetharan Over a year ago

do you see the example attached?

Ginger22 Over a year ago

That works! But it shows two images instead of one. Is there a way to parse out the repeat, so it doesn't duplicate the images? Thank you so much!

Ginger22 Over a year ago

Never mind. I added a </div> tag and that corrected it. Thank you again!

Ginger22 Over a year ago

One last question. Is there a way to load one initial image[0] or a random image when the page first loads? This is so the initial image area is not blank.

|

Collectives™ on Stack Overflow

NG-Click not Loading Image AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related