一个响应的多次迭代

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>

这是我的控制器：

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

使用控制器将两个元素放在同一个元素的下方：

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

在控制器中缓存请求：

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;
  }
});

一个响应的多次迭代

Multiple Iterations from One Response

javascript

json

angularjs

single-page-application