Я перечислил категорию из json data.i перечислил количество подкатегорий в категории, но я хочу перечислить только 3 подкатегории в категории. Если я нажму на просмотр дополнительной опции, я хочу перечислить соответствующую подкатегорию в зависимости от категории в модальном всплывающем окне.
Я вернулся созданный div зависит от нуля парентиды
$scope.cat = categories.filter(function(category) {
return category && category.parentid === 0
});
Я обновил свой код в Plunker.
http://plnkr.co/edit/Vh1NzYf0qjUkIygLUEJk?p=preview
3 ответа
Обновить
Если вы хотите, чтобы показать больше функциональности, обратитесь к ниже Plunker.
Это сделает работу. Я добавил пользовательский фильтр, который принимает parent.Id в качестве аргумента и проверяет родительский идентификатор дочернего элемента (что было сделано ранее с помощью ng-if). Затем я использую фильтр limit to: 3
angular, чтобы ограничить результаты только 3 пунктами.
Код:
$scope.searchMe = function(statusId) {
return function(user) {
return user.parentid === statusId;
}
}
И нг-повтор должен выглядеть так
<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>
Ссылки:
ОБНОВЛЕНИЕ -
Согласно вашему последнему требованию -
если я нажму на просмотр больше, я хочу перечислить все соответствующие подкатегории зависит от категории
Я обновляю plnkr
для отображения всех категорий во всплывающем окне после того, как пользователь нажал кнопку View More
.
Обновлен Plnkr - http://plnkr.co/edit/OUvzqWdfZuQnZpbXWSRWap=prep
В соответствии с вашим требованием, я считаю, вам нужно показать / скрыть подкатегории на основе нажатия кнопки, доступной в определенной категории.
Я упорядочил ваши данные и вместо того, чтобы сохранять их в несколько объектов, я использую отдельный объект newcat
для хранения и управления пользовательским интерфейсом.
Рабочая Плнкр -
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>
Вы можете сделать это простым фильтром:
<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;
}
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.