My goal is to display a list of products with their details, including a sublist of product models that are checked in the detailed list. The challenge is to achieve this using only one GET request. This means retrieving the JSON data of products once and reusing it multiple times on the page.
Below is my product list with details:
<div class="box-content" ng-controller="PostsCtrl" ><div>
<input type="search" ng-model="search"></div>
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
<thead>
<tr>
<th><tags:label text="productid"/></th>
<th><tags:label text="main.category"/></th>
<th><tags:label text="sub.category"/></th>
<th><tags:label text="brand"/></th>
<th><tags:label text="model"/></th>
<th><tags:label text="sku"/></th>
<th><tags:label text="active"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="post in posts | filter:search">
<td>{{post.productid}}</td>
<td>{{post.subcategory}}</td>
<td>{{post.subcategoryid}}</td>
<td>{{post.brand}}</td>
<td>{{post.model}}</td>
<td>{{post.brandid}}</td>
<td><input type="checkbox" ng-model="checked" ng-checked="post.isactive"></td>
</tr>
List of models:
<ul ng-controller="PostsCtrl">
<li ng-repeat="post in posts | filter:checked">{{post.model}}</li>
</ul>
Here is my controller:
<script>
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost/admin.productss/searchwithjson').
success(function(data, status, headers, config) {
$scope.posts = data;
}).
error(function(data, status, headers, config) {
});
});
</script>
I believe my current implementation involves two requests and does not enable listing of checked models. How can I enhance my code to achieve this?
Thank you.