단일 컨트롤러에서 여러 항목을 처리합니까? 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.

바인드 일부의 ViewModel와 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

답변

관련 문제