AngularJS export filtered JSON data.
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="MainCtrl">
<div class="panel panel-default">
<input type="text" ng-model="search.title">
<ul ng-repeat="b in data">
<h4>{{b.header}}</h4>
<ul>
<li ng-repeat="item in (b.items | filter:search.title)">{{item.title}}</li>
<!-- something like this
<li ng-repeat="item in datas[$parent.$index] = (b.items | filter:search.title)">{{item.title}}</li>
-->
</ul>
</ul>
<button class="btn btn-primary" ng-click="takeSnapshot()">Take Snapshot</button>
<div ng-show="snapshot">
<pre>{{snapshot|json}}
</div>
</div>
</div>
CSS
body {
padding: 20px 40px;
}
JavaScript
var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
var d = [{
header: "title1",
items: [{
title: "Bad"
}, {
title: "Good"
}, {
title: "Great"
}, {
title: "Cool"
}, {
title: "Excellent"
}, {
title: "Awesome"
}, {
title: "Horrible"
}, ]
}, {
header: "title2",
items: [{
title: "Bad1"
}, {
title: "Good1"
}, {
title: "Great1"
}, {
title: "Cool1"
}, {
title: "Excellent1"
}, {
title: "Awesome1"
}, {
title: "Horrible1"
}]
}];
$scope.data = d;
$scope.datas = [];
$scope.search = {title:""}
$scope.takeSnapshot = function() {
$scope.snapshot = [];
angular.forEach(d, function(oned){
var copy = {header: oned.header, items: []}
copy.items = filterFilter(oned.items, $scope.search.title);
$scope.snapshot.push(copy);
});
}
}]);