Help with a little Angular project

Hello,

I need little bit of help with my angular project, I can’t figure out why it dosen’t call the appropriate functions on the img using “ng-click”. I need to be able to show the spec info with the left click on the img element and there is a button in the header where the spec info is to hide it back again. I also want to know if there is a better way to clear the last image from the slider because I have used a directive to make a attribute when you right click the img element you delete the phone from the array, but when you get to the last phone it is deleted but the picture is still there I have tried to put a blank url after the array is empty but no use so I had to use the ng-hide, but I know there is a way to delete the pic also without hide because it’s still there when you use hide. Also is it better if I use “ng-repeat” to list the spec info, but then again I am wondering how to exclude the image key from each phone, because the “image” key is used in the slider so I can’t have show up in the spec info.

JS-Bin:The code of my app

a couple things here, for one you have all your logic wrapped in the “myFactory.getData().then(” function also your “showIt ()” function is just a function, its not bound to $scope so its not callable from the UI.

.controller('MainCtrl', function ($scope, myFactory) {
  $scope.counter = 0;

  $scope.showIt = function() {
    $scope.spec = false;
    console.log('Yey');
  }

  myFactory.getData().then(function (response) {
    $scope.phones = response.data.phones;
    $scope.url = $scope.phones[$scope.counter].image;
    console.log($scope.phones.length);
    $scope.increase = function () {
      $scope.counter++;
      if($scope.counter >= $scope.phones.length) {
        $scope.counter = $scope.phones.length-1;
      }
      $scope.url = $scope.phones[$scope.counter].image;
      console.log($scope.counter)
      passValue();
    }
    $scope.decrease = function () {
      $scope.counter--;
      if ($scope.counter <= 0) {
        $scope.counter = 0;
      }
      console.log($scope.counter);
      $scope.url = $scope.phones[$scope.counter].image;
      passValue();
    }
    $scope.show = true;
    $scope.delete = function () {
      $scope.phones.splice($scope.counter, 1);
      if($scope.counter > 0) {
        $scope.counter--;
      }
      if($scope.phones.length > 0) {
        $scope.url = $scope.phones[$scope.counter].image;
        passValue();
      } else {
        $scope.show = false;
      }
    }


    //Hide the spec info
    $scope.spec = true;


    function hideIt () {
      $scope.spec = true;
      console.log('Ney');
    }

    //Pass the correct index for spec info
    function passValue () {
      $scope.id = $scope.phones[$scope.counter].id;
      $scope.name = $scope.phones[$scope.counter].name;
      $scope.manufacturer = $scope.phones[$scope.counter].manufacturer;
      $scope.ram = $scope.phones[$scope.counter].ram;
      $scope.internal_memory = $scope.phones[$scope.counter].internal_memory;
      $scope.cpu = $scope.phones[$scope.counter].cpu;
      $scope.back_camera = $scope.phones[$scope.counter].back_camera;
      $scope.front_camera = $scope.phones[$scope.counter].front_camera;
      $scope.gpu = $scope.phones[$scope.counter].gpu;
      $scope.battery = $scope.phones[$scope.counter].battery;
      $scope.battery_removable = $scope.phones[$scope.counter].battery_removable;
      $scope.lte = $scope.phones[$scope.counter].lte;
      $scope.price = $scope.phones[$scope.counter].price;
    }

    
    passValue();
  });
});

I just pulled out the

function showIt () {
  $scope.spec = false;
  console.log('Yey');
}

and placed in the front of the function and added the scope

  $scope.showIt = function() {
    $scope.spec = false;
    console.log('Yey');
  }

This fixed the not showing spec.

1 Like

Ah, should have used $scope since I am using ng-click :expressionless: . Thanks :smiley:

1 Like