AngularJS - 從表格行顯示錶格

Question

我有一個表格materials，當我點擊時，我想要顯示與該行有關的所有數據的表格。什麼是最好的方法來做到這一點？

你可以看到下面

的index.html

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

控制器

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

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

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

}]); 

Answer 1

首先，我想你可以由材料儲存在一些解決這個問題我的代碼範圍變量並使用它來確定哪一行已被點擊。其次，你在做這個控制器的事情是錯誤的，我會告訴你如何解決它。您直接參考了控制器，這可能不是最佳實踐。我建議你改變你的代碼看起來像這樣

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> 

然後對每種材料，如果你有某種形式要顯示或其他任何

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

此外，這是不是那麼重要，但更最佳實踐中，您應該將您的http請求提取到服務中。 https://docs.angularjs.org/guide/services