AngularJS - 테이블 행의 양식 표시

Question

테이블이 materials이고 테이블을 클릭하면 해당 행과 관련된 모든 데이터가 포함 된 양식이 표시됩니다. 그렇게하기위한 최선의 방법은 무엇입니까?

당신은

index.html을 먼저

app.controller("materialController", ["$scope", "$http", function($scope, $http){   

     $http.get('material').success(function(data){ 
      $scope.materials = data; 
     }); 

     this.openForm = function(){ 
      // Do something 
     }; 

}]); 

Answer 1

, 나는 당신이 어떤에서 자료를 저장하여이 문제를 해결 수 있다고 생각

<section ng-controller="materialController as materialCtrl"> 
    <table class="table table-hover"> 
     <th> Nombre </th> 
     <th> Descripción </th> 
     <tr ng-repeat="material in materials" ng-click="materialCtrl.openForm()"> 
      <td> 
       {{material.name}} 
      </td> 
      <td> 
       {{material.description}} 
      </td> 
     </tr> 
    </table> 
</section> 

컨트롤러 아래에 내 코드를 볼 수 있습니다 scope 변수를 사용하여 어떤 행이 클릭되었는지 확인합니다. 둘째로, 당신은이 컨트롤러를 잘못하고 있습니다. 나는 그것을 고치는 방법을 보여줄 것입니다. 컨트롤러를 직접 참조하고 있는데 이는 아마 모범 사례는 아닙니다. 나는 당신이 어떤 표시하려는 형태 나 또한

<form ng-repeat="material in materials" ng-show="selectedRow == material"> 

다른 어떤이있는 경우 각 자료에 대한 다음이

app.controller("materialController", ["$scope", "$http", function($scope, $http){   

     $http.get('material').success(function(data){ 
      $scope.materials = data; 
     }); 
     $scope.selectedRow; 

     $scope.openForm = function(material){ 
      $scope.selectedRow = material; 
     }; 

}]); 

    <!--reference controller directly --> 
    <section ng-controller="materialController"> 
     <table class="table table-hover"> 
      <th> Nombre </th> 
      <th> Descripción </th> 
      <!-- reference openForm from scope --> 
      <tr ng-repeat="material in materials" ng-click="openForm(material)"> 
       <td> 
        {{material.name}} 
       </td> 
       <td> 
        {{material.description}} 
       </td> 
      </tr> 
     </table> 
    </section> 

처럼 보이도록 코드를 변경 제안이 매우 중요하지만 더하지 않습니다 모범 사례의 경우 http 요청을 서비스에 추출해야합니다. https://docs.angularjs.org/guide/services