Question

我使用angularjs搜索过滤器，它工作正常，但我只想在汽车列表中搜索框，所以我在搜索框中添加了ng-if="key=='Cars'"所以它只会出现在汽车中，但之后添加ng-if过滤器停止工作，我无法弄清楚它为什么不起作用？

<div class="form-group" ng-if="key=='Cars'">
 <input type="text" ng-model="search" placeholder="Search in {{key}}" class="form-control input-sm" />
</div>

＆＃13;

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.data = {
    "Cars": ["Ferrari", "Lamborghini", "Mercedes", "BMW", "Audi", "Bugatti", "Ford"],
    "object": [0, 1, 2, 3, 4, 5, 6, 7],
    "object3": [0, 1, 2, 3, 4, 5, 6, 7]
  }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <div class="row">
      <div class="col-xs-4" ng-repeat="(key,val) in data">
        <div class="panel panel-default">
          <div class="panel-heading">{{key}}</div>
          <div class="panel-body">
            <div class="form-group" ng-if="key=='Cars'">
              <input type="text" ng-model="search" placeholder="Search in {{key}}" class="form-control input-sm" />
            </div>
            <table class="table">
              <tr ng-repeat="j in val | filter:search">
                <td>{{j}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

控制台中没有任何错误

Answer 1

将ng-if更改为ng-show="key==='Cars'"

这是一个有效的Fiddle

您可以使用此Fiddle作为解决方案。维护一系列与密钥相对应的搜索参数。它的作用是为数据对象中的每个键维护一个搜索参数。它会在search中创建一个名为data的新数组。 $index是正在使用的参数的索引。对于汽车，它是0，对象是1，依此类推。因此，汽车的文本框将仅更新与其绑定的相应搜索参数，即第0个索引处的值。隐藏的其他输入实际上分别作为第一和第二索引绑定到值。所以没有超越价值。

Answer 2

如果您不希望search模型为全局模型，请将表格包裹在ng-if

中

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.data = {
    "Cars": ["Ferrari", "Lamborghini", "Mercedes", "BMW", "Audi", "Bugatti", "Ford"],
    "object": [0, 1, 2, 3, 4, 5, 6, 7],
    "object3": [0, 1, 2, 3, 4, 5, 6, 7]
  }
  
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <div class="row">
      <div class="col-xs-4" ng-repeat="(key,val) in data">
        <div class="panel panel-default">
          <div class="panel-heading">{{key}}</div>
          <div class="panel-body">
            <div class="form-group" ng-if="key=='Cars' || key=='object3'">
              <input type="text" ng-model="search" placeholder="Search in {{key}}" class="form-control input-sm" />
              <table class="table">
                <tr ng-repeat="j in val | filter:search">
                  <td>{{j}}</td>
                </tr>
              </table>
            </div>
            <div class="form-group" ng-if="key!='Cars' && key!='object3'">
                <table class="table">
                <tr ng-repeat="j in val | filter:search">
                  <td>{{j}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

从使用ng-if显示的下拉列表过滤列表时，我遇到了同样的问题。问题是ng-if创建了一个子作用域，因此，为了到达列表，您需要更改为“ ng-model =” $ parent.search“

简单搜索过滤器在ng-if angularjs中不起作用

3 个答案: