Using value of ng-model in ng-if

Question

I have a text box where I enter an idNumber. I want to check if that id number appears in my table. If it does, I want to add a glyphicon to that row.

Now, my problem is that I don't know how to access ng-model="idNumber" from ng-if.

I try using ng-if="data.id== {{idNumber}}" but that does not work.

        <div class="container" id="inputDiv">
            <div>
                <input type="text" class="form-control" ng-model="idNumber">
            </div>
        </div>

        <div class="container col-md-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Id number</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="data in idData">
                    <td>{{data.id}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.dokumenttype}}</td>
                    <td>
                      <span ng-if="data.id== {{idNumber}}">
                        <span class="glyphicon glyphicon-asterisk"></span>
                      </span>
                    </td>                    
                </tr>
                </tbody>
            </table>
        </div>

You should add a fiddle/plnkr which demonstrates the problem. If you can reproduce it, we'll know what's going on. — cst1992, Jul 04 '17 at 15:04
At least share idData value. ng-show="data.id === idNumber" should work — Shantanu, Jul 04 '17 at 15:16
@SamWillis Thank you, your solutions is working. My problem was I had this in my controller: `$scope.idNumber= '';` — chichi, Jul 04 '17 at 17:30

score 2 · Answer 1 · answered Jul 04 '17 at 15:04

2

Use like this:

<span ng-if="data.id === idNumber">

answered Jul 04 '17 at 15:04

Arun Sahani

72
6

If `data.id == idNumber` isn't working, this definitely wouldn't. – cst1992 Jul 04 '17 at 15:13

Sajeetharan · Accepted Answer · 2017-07-04T16:30:44.093

You do not need to put an expression here, just replace it as,

<span ng-if="data.id===idNumber">
    <span class="glyphicon glyphicon-asterisk"></span>
</span>

DEMO

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

myApp.controller('thecontroller',function($scope){
   $scope.idData = [{
  "id": "1",
  "name": "Kimberlyn",
  "documentType": "McGaw"
}, {
  "id": "2",
  "name": "Harmony",
  "documentType": "Sedworth"
}, {
  "id": "3",
  "name": "Adela",
  "documentType": "Blenkin"
}];
});

<!DOCTYPE html>
<html>
    <head>
      <title>ng-Messages Service</title>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
    </head>
    <body ng-app="myApp">
        <div ng-controller='thecontroller'>
       <div class="container" id="inputDiv">
            <div>
                <input type="text" class="form-control" ng-model="idNumber">
            </div>
        </div>
         <div class="container col-md-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Id number</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="data in idData">
                    <td>{{data.id}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.dokumenttype}}</td>
                    <td>
                      <span ng-if="data.id === idNumber">
                        <span>test</span>
                      </span>
                    </td>                    
                </tr>
                </tbody>
            </table>
        </div>
        </div>
    </body>
</html>

Thank you, this IS working! My problem was that I had this line in my controller: `$scope.idNumber= '';` — chichi, Jul 04 '17 at 17:29

Using value of ng-model in ng-if

2 Answers2