Question

我想基于id来过滤细节，这通常在两个json文件中显示。怎么做？

HTML：

  <body ng-controller="FruitCtrl as fctrl">
    <div class="col-xs-3">
       <h4>Categories</h4>
            <div class="list-group">
                <a href="#" class="list-group-item" ng-repeat="x in categories">{{ x.category }}</a>
            </div>
    </div>
    <div class="col-xs-9">
       <h3>Details</h3>
         <div class="panel panel-default" ng-repeat="info in fruitdetails">
              <div class="panel-body">
                  <h5>{{info.name}}</h5>
                  <p>{{info.detail}}</p>
                </div>
          </div>

    </div>
  </body>

APP.JS

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

    app.controller('FruitCtrl', function($scope,$http) {


     $http.get('category_json.json').success(function(data) {
            $scope.categories=data;
        });
        $http.get('details.json').success(function(data) {
            $scope.fruitdetails=data;
        });

    });

category_json

[
        {"category": "All Category","cid":""},
        {"category": "fruit","cid":"1"},
        {"category": "nut","cid":"2"},
        {"category": "Vegetable","cid":"3"}
]

detail.json

[
        {"name": "apple","cid":"1","detail":"red in color"},
        {"name": "carrot","cid":"3","detail":"good for eyes"},
        {"name": "orange","cid":"1","detail":"orange in color"},
        {"name": "almond","cid":"2","detail": "costly!!!"},
        {"name": "banana","cid":"1","detail": "yellow in color"},
        {"name": "beetroot","cid":"3","detail": "good for blood"},
]

Plnkr：http://plnkr.co/edit/V1xdLm2VV4UKDHeg4qvs?p=preview

Answer 1

使用cid传递ng-click并使用$filter根据cid进行过滤。

以下是plunkr

<强> HTML

<body ng-controller="FruitCtrl as fctrl">
<div class="col-xs-3">
  <h4>Categories</h4>
  <div class="list-group">
    <a href="#" class="list-group-item" ng-repeat="x in categories" ng-click="selectedCategories(x.cid)">{{ x.category }}</a>
  </div>
</div>
<div class="col-xs-9">
  <h3>Details</h3>
  <div class="panel panel-default" ng-repeat="info in matchFruitDetails">
    <div class="panel-body">
      <h5>{{info.name}}</h5>
      <p>{{info.detail}}</p>
    </div>
  </div>
</div>

<强> APP.JS

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

app.controller('FruitCtrl', function($scope,$http,$filter) {


    $http.get('category_json.json').success(function(data) {
        $scope.categories=data;
    });

    $http.get('details.json').success(function(data) {
        $scope.fruitdetails=data;
        $scope.matchFruitDetails = angular.copy($scope.fruitdetails);
    });

    $scope.selectedCategories = function(id){
      console.log(id);
      $scope.matchFruitDetails = $filter("filter")($scope.fruitdetails,{cid : id},true);
    }

});

注意

创建$scope.fruitdetails作为$scope.matchFruitDetails的副本，以便在过滤后将记录显示为matchFruitDetail，因此您的实际数据始终显示在$scope.fruitdetails中，您可以从中进行过滤。

Answer 2

观看Plunkr 在模板端执行此操作的简单方法是

<div class="panel panel-default" ng-repeat="info in fruitdetails | filter: {'cid':filterId} ">

以这种方式设置filterId

<a href="#" class="list-group-item" ng-repeat="x in categories" ng-click="setFilter(x.cid)" >{{ x.category }}</a>

JS：

 $scope.filterId= "";
 $scope.setFilter = function(id){
   $scope.filterId = id;
 };

浏览角度滤镜的Documentation。

单击列表时过滤AngularJs

2 个答案: