Question

我对Angular JS比较陌生。目前我遇到了一个问题，假设我在列表中有1000个项目。为了显示每个项目的详细信息，我将传递items_id以生成html示例（123.html）。在这种情况下，我需要1000控制器来处理这种情况吗？

控制器

 app.controller('item0001',function($scope,$http,$sce){
    $scope.data = [];
    $scope.details=[];
    $http.get("https://api.com/test/product/0001").then(function(response){  
       var getData = response.data;
       $scope.data.push(response.data);
       $scope.bindHtml = $sce.trustAsHtml(getData.details);
       for(var i = 0; i<getData.specification.length; i++){
           $scope.details.push(getData.details[i]);
       }
    });     
});

    app.controller('item0002',function($scope,$http,$sce){
    $scope.data = [];
    $scope.details=[];
    $http.get("https://api.com/test/product/0002").then(function(response){  
       var getData = response.data;
       $scope.data.push(response.data);
       $scope.bindHtml = $sce.trustAsHtml(getData.details);
       for(var i = 0; i<getData.specification.length; i++){
           $scope.details.push(getData.details[i]);
       }
    });     
});

查看

<p>
<a href="{{items.id}}.html" role="button">View More</a>
</p>

Answer 1

定义单个视图（html）和控制器来处理这个..示例如下。

productDetails.html（查看）

<div>
  <span>{{productName}}</span>
</div>

productDetails.js（controller）

app.controller('productDetailsCtrl',function($scope,$http,$sce){
    $scope.productName = "";        
    $http.get("https://api.com/test/product/0001").then(function(response){  
       var getData = response.data;
       $scope.productName = getData.productName;       
    });     
});

Answer 2

使用单一控制器和HTML。

使用某些ViewModel（$scope上的属性）

绑定HTML

从您的控制器中调用获取项目详细信息（我假设您已经通过点击某个按钮获取这些详细信息）使用服务。

成功回调服务更新视图模型。和使用双向绑定的角度，将使用最后一个项目更新视图。

控制器：

app.controller('ProductCtrl', function($scope, ProductService) {
  var getProduct = function(productId) {
    ProductService.getProduct(productId).then(function(response) {
      $scope.productDetails = response.data;
    })
  };
});

服务：

app.factory('ProductService', function($http) {
  return {
    getProduct(productID) {
      return $http({
        method: 'GET',
        url: "https://api.com/test/product/" + productID
      });
    };
  }
});

HTML视图：

<body ng-controller="ProductCtrl">
  <div ng-init="getProduct(0001)">
    <p>Name {{productDetails.name}}</p>
    <p>ID {{productDetails.id}}</p>
    <p>Description {{productDetails.description}}</p>
  </div>
  <button ng-click="getProduct(productDetails.id + 1)">Get Next Product</button>
</body>

我希望这能为您提供如何实现您的要求的基本知识。请详细说明您的问题，以便我可以提供更具体的解决方案。

在单个控制器中处理多个项目？ AngularJS

2 个答案: