Ngif not workin on img tag

i want to hide the img tag when the “pic” property of the current ellement is empty but no way to get it work. i do this by checking if the property lenght is greater than 0.

html is

<div class="list card" ng-repeat="fonctionnement in fonctionnements "><div class="item item-divider"><strong>{{}}</strong></div>
  <div class="item item-body">
    <img ng-if='hasPicture("{{fonctionnement.pic}}")' class="full-image" src="img/{{fonctionnement.pic}}">
**The js is**
.controller('InternetCtrl', function($scope,Fonctionnement) {
    $scope.hasPicture = function(item){
        //return (item.length > 0) ;
        if(item.length > 0){
            return true
        else return false

here is the sevice code

.factory('Fonctionnement', function() {
    var items = [
        { id: 0, name:"XXX", pic: "pic.jpg", text: "...."},
        { id: 1, name:"XXXX", pic: "", text: "l'utilisateur qui ..."},
        { id: 2, name:"XXX", pic: "", text: "De l'autre côté...."},
    return {
        all: function() {
            return items;

thanks for your help

Try removing the curly braces from the call. Use hasPicture(fonctionnement.pic) instead of hasPicture("{{fonctionnement.pic}}")

thank you for your help i found a small fix. in my service i simply remove the pic property of an element if that element do not need it insead of a blank pic property

{ id: 2, name:"XXX", text: "De l'autre côté...."},

instead of

{ id: 2, name:"XXX", pic: "", text: "De l'autre côté...."},

i then simply make use of

<img ng-if="fonctionnement.pic" class="full-image" src="img/{{fonctionnement.pic}}">

instead of

<img ng-if='hasPicture("{{fonctionnement.pic}}")' class="full-image" src="img/{{fonctionnement.pic}}">

i do no more need for the hasPicture() method in my controller

hope this will also help.


Because empty strings evaluate to false in javascript, you don’t even need to remove the pic property and it will still work.

Yes, tried it and it works great. This could prevent from eventual errors aswell.
Thanks ors