搜索在列表中嵌套的ng-repeat中过滤并隐藏没有孩子的父母

时间：2017-06-08 17:37:08

标签： javascript jquery angularjs json

我想过滤从json文件中获取的动态列表名称中的项目。在这里，我的要求是隐藏没有孩子的父母，我在这里分享我的示例代码..在我的程序中，父列表仍在显示。

的index.html

 <!DOCTYPE html>
    <html ng-app="myItemsApp">

    <head>
      <meta charset="utf-8" />
      <title>dynamic title</title>

      <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

      <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
      <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
      <script src="script.js"></script>
    </head>

    <body>

      <form >
           <div class="form-group">
        <input type="text" class="form-control" ng-model="getlist" placeholder="Search Docs..">
            </div>
      </form>


      <div ng-controller=NavController>
        <h3>Load title dynamically</h3>
        <div class="row">
          <div class="col-md-4">
            <div class="panel panel-default">
              <ul class="list-group" ng-repeat="(key,item) in itemDetails">
                {{key}}
                <li ng-repeat="i in item | filter:getlist"><a class="list-group-item" ng-click="select(i)" >{{i.title}}</a></li>
              </ul>
            </div> 
          </div>

          <div class="col-md-8">
            <div class="panel panel-default">
              <h2>Title_from json: {{selected.title}}</h2>
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

的script.js

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

myItemsApp.factory('itemsFactory', ['$http', function($http){
  var itemsFactory ={
    itemDetails: function() {
      return $http(
      {
        url: "action.json",
        method: "GET",
      })      
      .then(function (response) {
        return response.data;
        });
      }
    };
    return itemsFactory;

}]);


myItemsApp.controller('NavController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
  var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });
    $scope.select = function(item) {
      $scope.selected = item;
    }
    $scope.selected = {};
}]);

action.json

{

   "product": [{
         "title": "Product View",
         "path": "test1"

      },

      {
         "title": "Product Add",
         "path": "2"

      },
      {
         "title": "Product Update",
         "path": "test3"


      },

      {
         "title": "Product delete",
         "path": "test4"

      }
   ],

   "page": [{
      "title": "About us"
   }]

}

1 个答案:

答案 0 :(得分：1)

应该是这样的

<div class="col-md-4">
    <div class="panel panel-default">
      <ul class="list-group" ng-repeat="(key,item) in itemDetails" >
        {{result.length > 0 ?key : ''}}
        <li ng-repeat="i in result = (item | filter:getlist)"><a class="list-group-item" ng-click="select(i)" >{{i.title}}</a></li>
      </ul>
    </div> 
  </div>