CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
Addi Khan
Addi Khan

Reputation: 201

How to ng-if use when its value is ""?

How to use ng-if? I have below code. If image_path not null show td otherwise not. My code does not work.

ng-if="hs.image_path != """

<td ng-if="hs.image_path != """><img id="customer_photo"src="http://localhost:3000/{{hs.image_path}}" alt="{{hs.image_path}}"  width="80" height="50" class="rounded mx-auto d-block"></td>

below are database

 {   "_id" : ObjectId("587669fc16d3ef159c4a1463"),
            "image_path" : "images/job_p.jpg",         
            "details" : "Programmer"           
            "datetime" : ISODate("2017-01-11T17:23:08.870Z")
        }, 
        {
            "_id" : ObjectId("58766a4616d3ef159c4a148c"),
            "image_path" : "",           
            "details" : "Programmer Sleeping",          
            "datetime" : ISODate("2017-01-11T17:24:22.195Z")
        }

Upvotes: 0

Views: 1603

Answers (3)

Naghaveer R
Naghaveer R

Reputation: 2944

Try this <td ng-if="hs.image_path != ''"> or <td ng-if="hs.image_path.length > 0">

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.var = [{
    "_id": "587669fc16d3ef159c4a1463",
    "image_path": "AngularJS-large.png",
    "details": "Programmer",
    "datetime": "2017-01-11T17:23:08.870Z"
  }, {
    "_id": "58766a4616d3ef159c4a148c",
    "image_path": "",
    "details": "Programmer Sleeping",
    "datetime": "2017-01-11T17:24:22.195Z"
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr ng-repeat="hs in var">
      <td ng-if="hs.image_path != ''">
        <img id="customer_photo" ng-src="https://angularjs.org/img/{{hs.image_path}}" alt="{{hs.image_path}}" width="80" height="50" class="rounded mx-auto d-block">
      </td>
    </tr>
    <table>
</div>

Also Change src="" to ng-src=""

<img id="customer_photo" ng-src="http://localhost:3000/{{hs.image_path}}" />

Upvotes: 3

Manu Obre
Manu Obre

Reputation: 2304

First Of all you should use ng-src instead of src

And for the ng-if directive issue you could have two options:

option 1:

Will be true in case of hs.image_path is different from ''.

<td ng-if="hs.image_path!=''">
  <img id="customer_photo" ng-src="http://localhost:3000/{{hs.image_path}}" alt="{{hs.image_path}}" width="80" 
  height="50" class="rounded mx-auto d-block">
</td>

option 2:

Will be true in case of hs.image_path has a value in it.

<td ng-if="hs.image_path">
  <img id="customer_photo" ng-src="http://localhost:3000/{{hs.image_path}}" alt="{{hs.image_path}}" width="80" 
  height="50" class="rounded mx-auto d-block">
</td>

Upvotes: 1

Karthik VU
Karthik VU

Reputation: 561

You have used the quotes wrongly.

Possible solutions that you can use :

  1. ng-if="hs.image_path != ''"
  2. ng-if="hs.image_path.trim().length > 0"

Upvotes: 2

Related Questions