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

阿布舍克·潘迪

我正在使用 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>

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

控制台没有任何错误

沙扎德

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

这是一个工作小提琴

您可以使用此Fiddle作为解决方案。维护与键对应的搜索参数数组。它的作用是为数据对象中的每个键维护一个搜索参数它会search在您的data. 而且$index是正在使用的参数指标。对于汽车,它是 0,对于物体,它将是 1,依此类推。因此,汽车的文本框只会更新与其绑定的相应搜索参数,即第 0 个索引处的值。其他隐藏的输入实际上分别绑定到作为第一和第二索引的值。所以没有覆盖价值。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ng-repeat limit中的AngularJS父索引过滤器不起作用

来自分类Dev

带有自定义过滤器的angularjs ng-options不起作用

来自分类Dev

ng-repeat和过滤器不起作用AngularJS

来自分类Dev

带有自定义过滤器的angularjs ng-options不起作用

来自分类Dev

angularjs过滤器(不起作用)

来自分类Dev

AngularJS过滤器不起作用

来自分类Dev

AngularJS过滤器不起作用

来自分类Dev

AngularJS过滤器在Internet Explorer中不起作用

来自分类Dev

输入字段过滤器在AngularJS中不起作用

来自分类Dev

jsfidle过滤器在angularjs中不起作用

来自分类Dev

AngularJS过滤器在Internet Explorer中不起作用

来自分类Dev

AngularJS过滤器在对象中不起作用

来自分类Dev

输入字段过滤器在AngularJS中不起作用

来自分类Dev

下拉过滤器在angularjs中不起作用

来自分类Dev

过滤器在 AngularJs 中不起作用

来自分类Dev

ng-options过滤器不起作用?

来自分类Dev

AngularJS 1.3异步过滤器不起作用

来自分类Dev

AngularJS:范围过滤器不起作用

来自分类Dev

AngularJS过滤器“全部”不起作用

来自分类Dev

AngularJS唯一过滤器不起作用

来自分类Dev

angularjs过滤器功能不起作用

来自分类Dev

日期过滤在angularjs中不起作用

来自分类Dev

在AngularJS的选择下拉列表中添加搜索过滤器

来自分类Dev

AngularJs分页中的搜索框过滤器

来自分类Dev

angularjs中的自定义搜索过滤器

来自分类Dev

搜索过滤器不起作用

来自分类Dev

angularjs过滤器起作用

来自分类Dev

ng-checked在angularjs中不起作用

来自分类Dev

ng-transclude在模板AngularJS中不起作用