javascript - 一个响应的多次迭代

Question

我想显示一份包含详细信息的产品列表以及在详细列表中检查的产品型号列表，但我只想通过一个获取请求来完成此操作。我的意思是我将获得产品的 json，并且我将在页面中使用多次。

这是我的产品列表，其中包含详细信息:

<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>

型号列表:

<ul ng-controller="PostsCtrl">
  <li ng-repeat="post in posts | filter:checked">{{post.model}}</li>
</ul>

这是我的 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>

我认为就像我上面做的那样；我做了2个请求。我也无法列出已检查的型号。

如何修改我的代码？

谢谢。

Answer 1

选项 1:

使用 Controller 将两个元素放在同一元素的降序位置:

<div class="box-content" ng-controller="PostsCtrl" >

    ...Some other html....

    <table>
        <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="post.checked"></td>
        </tr>
    </table>

    ...Some other html....

    <ul>
        <li ng-repeat="post in posts |  filter:{checked:true}">{{post.model}}</li>
    </ul>

</div>

选项 2:

在 Controller 中缓存请求:

app.controller("PostsCtrl", function($rootScope, $scope, $http) {
  $rootScope.cache = $rootScope.cache || {};

  if(!$rootScope.cache.posts){
      $http.get('http://localhost/admin.productss/searchwithjson').
        success(function(data, status, headers, config) {
            $rootScope.cache.posts = $scope.posts = data;
        }).
        error(function(data, status, headers, config) {});
  } else {
      $scope.posts = $rootScope.cache.posts;
  }
});