在單個控制器中處理多個項目？ AngularJS

我對Angular JS比較陌生。目前我遇到了一個問題，可以說我在列表中有1000個項目。爲了顯示每個項目的詳細信息，我將通過items_id生成html示例（123.html）。在這種情況下，我是否需要1000個控制器來處理這種情況？在單個控制器中處理多個項目？ AngularJS

控制器

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>

來源

2017-03-22 loveCodeloveYou

絕對不是，只有一個視圖和控制器，並使用查詢字符串或路徑變量來處理您的控制器內。 – imprezzeb

@imprezzeb感謝您的快速回復。但這是否意味着我仍然需要創建1000個不同的ID html文件，但只有單個控制器？ – loveCodeloveYou

不只是定義單一視圖（HTML）。 – imprezzeb

使用單個控制器和HTML。

綁定一些視圖模型的HTML（上$scope屬性）

從控制器發出呼叫來獲取項目的詳細信息使用服務（我假設你有一些按鈕，點擊獲取這些詳細信息）。

成功回調您的服務更新視圖模型。和使用雙向綁定的角度，將更新最後一個項目獲取的視圖。

控制器：

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>

我希望這給你如何實現你的需求的基本思路。請詳細說明您的問題，以便我可以提供更具體的解決方案。

來源

2017-03-22 04:10:56

定義的單一視圖（HTML）和控制器，用於處理在下面這個例子..。

productDetails.html（視圖）

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

productDetails.js（控制器）

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

來源

2017-03-22 04:09:47 imprezzeb

在單個控制器中處理多個項目？ AngularJS

回答

相關問題