gpt4 book ai didi

javascript - 在列表中的嵌套 ng-repeat 中搜索过滤器并隐藏没有 child 的 parent

转载 作者:太空宇宙 更新时间:2023-11-04 15:35:04 24 4
gpt4 key购买 nike

Demo

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>

Demo

关于javascript - 在列表中的嵌套 ng-repeat 中搜索过滤器并隐藏没有 child 的 parent ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44442271/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com