Handle multiple item in single controller? AngularJS

Question

I am relatively new to Angular JS. Currently I met a problem, lets say I have 1000 items in a list. In order to display the details about each item I will pass the items_id to generate html example(123.html). In this case, do I need 1000 controller to handle this kind of situation?

Controller

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

View

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

Definitely not, just a single view and controller and use either query string or path variable to handle that inside your controller. — imprezzeb
– imprezzeb, Commented Mar 22, 2017 at 4:02
@imprezzeb Thank you for such a quick response. But is it means that I still need create 1000 different ID html file but with only single controller? — loveCodeloveYou
– loveCodeloveYou, Commented Mar 22, 2017 at 4:03
Not off the top of my head, but reading up on custom elements/directives would be useful. Something that will be written in markup as <customProduct pid="numberAsNgRepeatVarHere"></customProduct>. Then you'd put an ng-repeat on or around that for each product number in the array. Finally, I think it's an antipattern to make your actual call from the controller-- probably create a "getProduct" service that accepts a pid and makes the actual call, and passes back the result via a promise or something. — Alexander Nied
– Alexander Nied, Commented Mar 22, 2017 at 4:15
Yeah I agree with @anied, to use factory to define all your http calls and use that service/factory method in your controller instead. — imprezzeb
– imprezzeb, Commented Mar 22, 2017 at 4:16

Sachet Gupta · Accepted Answer · 2017-03-22 04:46:41Z

Use single controller and HTML.

Bind the HTML with some ViewModel (a property on $scope)

From your controller place the call to fetch item details (I am assuming you have fetch these details on click of some button) using a service.

In success callback of your service update the view model. and angular using 2-way binding, will update the view with last item fetched.

Controller:

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

Service:

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

HTML View:

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

I hope this gives you a basic idea of how to implement your requirement. Please elaborate your question so that I can provide a more specific solution.

imprezzeb · Accepted Answer · 2017-03-22 04:09:47Z

1

Define a single view (html) and controller to handle this.. example below.

productDetails.html (view)

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

answered Mar 22, 2017 at 4:09

imprezzeb

7162 gold badges7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Handle multiple item in single controller? AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related