使用 Angular js 和单选按钮从 html 表中更新数据

Question

我有一个 HTML 表格，其中包含一些来自 Web 服务的数据，并且我正在使用 Angular，然后我有 3 个单选按钮来显示来自我的数据源的前 10、20 和 30 条记录。这 3 个按钮应该为每个按钮调用一个 Web 服务，Web 服务已经在工作，但我不知道如何让这些单选按钮显示表中的新数据，该表的结构不会改变，因为我正在使用 Angular 我可以避免刷新整个页面。

有人有这方面的例子吗？

我的表格在一个不同的 div 中，它有自己的控制器来显示一些数据：

<div ng-controller="ctrlOne">
  <table>
   <tr ng-repeat="d in data">
    <td>{{d.field1}}</td>
   </tr>
  </table>
</div>

在另一个 div 中，我有我的单选按钮：

   <div class="radio">
    <label class="radio-inline"><input type="radio" name="top30">TY Top 30 Categories</label>
    <label class="radio-inline"><input type="radio" name="top20">TY Top 20 Brands</label>
    <label class="radio-inline"><input type="radio" name="top10">TY Top 10 Suppliers</label>
   </div>

还没有控制器。

Answer 1

您可以使用单选组来选择这样的数据模型..

 <div class="radio">
  <label class="radio-inline"><input type="radio" ng-model="tableVal" value="data10">Show top 10</label>
  <label class="radio-inline"><input type="radio" ng-model="tableVal" value="data20">Show top 20</label>
  <label class="radio-inline"><input type="radio" ng-model="tableVal" value="data30">Show top 30</label>
</div>  
<table ng-if="tableVal === 'data10'">
 <tr ng-repeat="d in data10">
  <td>{{d}}</td>
 </tr>
</table>

<table ng-show="tableVal === 'data20'">
 <tr ng-repeat="d in data20">
  <td>{{d}}</td>
 </tr>
</table>

<table ng-show="tableVal === 'data30'">
 <tr ng-repeat="d in data30">
  <td>{{d}}</td>
 </tr>
</table>   

控制器中的数据集示例：

app.controller('MainCtrl', function($scope) {
  $scope.tableVal = 'data10'
  $scope.data10 = ['10-first','10-second','10-third','10-fourth'];
  $scope.data20 = ['20-first','20-second','20-third','20-fourth'];
  $scope.data30 = ['30-first','30-second','30-third','30-fourth'];
});