我从 json 数据中列出了类别。我在类别下列出了子类别的数量，但我只想在类别下列出 3 个子类别。如果我单击查看更多选项，我想列出相应的子类别取决于模式弹出窗口中的类别.
我已经返回创建的 div 依赖于 parentid 零
$scope.cat = categories.filter(function(category) {
return category && category.parentid === 0
});
我已经在 plunker 中更新了我的代码。
【问题讨论】：
标签： javascript angularjs json
你可以通过simlpe过滤器做到这一点：
<div ng-repeat="childItem in content | filter: item.id | limitTo: 3">
它也将摆脱使用ng-if="childItem.parentid === item.id"
例子：
<div ng-repeat="item in cat">
{{item.name}}
<div ng-repeat="childItem in content | filter: item.id | limitTo: 3">
<div style="margin-left: 20px;" >
{{childItem.name}}
</div>
</div>
</div>
如果要处理view more，可以这样写：
<div ng-repeat="childItem in content | filter: item.id | limitTo: limit">
和：
$scope.limit = 3;
$scope.viewMore = function(){
$scope.limit = 100;
}
[编辑]
如果您想更新每个子类别的view more，您需要绑定限制到您的data：
<body ng-controller="MainCtrl">
<div ng-repeat="item in cat">
{{item.name}}
<div ng-repeat="childItem in content | filter: item.id | limitTo: item.limit">
<div style="margin-left: 20px;" >
{{childItem.name}}
</div>
</div>
<a href="" ng-click="viewMore(item)"
ng-if="item.limit == 3">view more</a>
</div>
</body>
和：
$scope.viewMore = function(item){
item.limit = 100;
}
【讨论】：
limit绑定到item
更新
如果您想要显示更多功能，请参阅下面的 Plunkr。
这将完成这项工作。我添加了一个自定义过滤器，它将 parent.Id 作为参数并检查孩子的父 ID（之前由 ng-if 完成）。然后我使用 Angular 的 limit to: 3 过滤器将结果限制为仅 3 项。
代码：
$scope.searchMe = function(statusId) {
return function(user) {
return user.parentid === statusId;
}
}
ng-repeat 应该是这样的
<div ng-repeat="item in cat">
{{item.name}}
<div ng-repeat="childItem in content | filter: searchMe(item.id) | limitTo: 3">
<div style="margin-left: 20px;">
{{childItem.name}}
</div>
</div>
<a ng-click="open_modalpopup()">view more</a>
</div>
参考资料：
【讨论】：
更新 -
根据您的最新要求 -
如果我点击查看更多我想列出所有相应的子类别 取决于类别
一旦用户单击View More 按钮，我将更新plnkr 以在弹出窗口中显示所有类别。
更新 Plnkr - http://plnkr.co/edit/OUvzqWdfZuQnZpbXWSRW?p=preview
根据您的要求，我认为您需要根据特定类别下可用的按钮单击来显示/隐藏子类别。
我重新排列了您的数据，而不是将其保存到多个对象中，而是使用单个对象 newcat 来存储和管理 UI。
工作 Plnkr -
http://plnkr.co/edit/F6MlkMWOJ2b7isRAM1u6?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var data = [{
id: 1,
name: 'mobile',
parentid: 0
}, {
id: 2,
name: 'samsung',
parentid: 1
}, {
id: 3,
name: 'moto',
parentid: 1
}, {
id: 4,
name: 'redmi',
parentid: 1
}, {
id: 5,
name: 'honor',
parentid: 1
}, {
id: 6,
name: 'nokia',
parentid: 1
},
{
id: 7,
name: 'tv',
parentid: 0
}, {
id: 8,
name: 'tv1',
parentid: 7
}, {
id: 9,
name: 'tv2',
parentid: 7
}, {
id: 10,
name: 'tv3',
parentid: 7
}, {
id: 11,
name: 'tv4',
parentid: 7
}, {
id: 12,
name: 'tv5',
parentid: 7
}];
var categories = data;
$scope.title = 'Show Hide Subcategories';
$scope.cat = categories.filter(function(category) {
return category && category.parentid === 0
});
$scope.newcat = angular.extend($scope.cat, {});
angular.forEach($scope.cat, function(cat, key){
var tmpIndex = 0;
var tmpdata = categories.filter(function(category) {
if(cat.id === category.parentid) {
category.indexVal = tmpIndex;
category.isShow = tmpIndex < 3 ? true : false;
tmpIndex++;
return true;
}
})
$scope.newcat[key]['subCat'] = tmpdata;
$scope.newcat[key]['moreclicked'] = false;
})
$scope.showMore = function(index) {
if(!$scope.newcat[index]['moreclicked']) {
angular.forEach($scope.newcat[index].subCat, function(subcat, key) {
subcat.isShow = true;
})
$scope.newcat[index]['moreclicked'] = true;
}
else {
angular.forEach($scope.newcat[index].subCat, function(subcat, key) {
if(key > 2)
subcat.isShow = false;
})
$scope.newcat[index]['moreclicked'] = false;
}
};
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3 ng-bind="title"></h3>
<div ng-repeat="cat in newcat">
<b>{{cat.name}}</b>
<div ng-repeat="subcat in cat.subCat">
<div style="margin-left: 20px;" ng-if="subcat.isShow">
{{subcat.name}}
</div>
</div>
<button ng-click="showMore($index)" ng-bind="!cat.moreclicked ? 'View More': 'View Less'"></button>
</div>
</body>
</html>【讨论】：