I wanted to filter the items in a dynamic list names that is fetched from json files. here my requirement is to hide the parents that don't have children i'm sharing my sample code here.. in my program the parent list is still showing.
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>
脚本.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"
}]
}
最佳答案
应该是这样的
<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>
关于javascript - 在列表中的嵌套 ng-repeat 中搜索过滤器并隐藏没有 child 的 parent ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44442271/