在ng-if中使用ng-model的值

时间:2017-07-04 14:54:37

标签: angularjs angularjs-ng-if

我有一个文本框,我输入一个idNumber。我想检查一下我的表中是否出现了这个ID号码。如果是,我想在该行添加一个glyphicon。

现在,我的问题是我不知道如何从ng-if访问ng-model="idNumber"

我尝试使用ng-if="data.id== {{idNumber}}",但这不起作用。

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

2 个答案:

答案 0 :(得分:2)

像这样使用:

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

答案 1 :(得分:1)

您不需要在此处添加表达式,只需将其替换为

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

<强>样本

&#13;
&#13;
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"
}];
});
&#13;
<!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>
&#13;
&#13;
&#13;