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

使用角度js和单选按钮从html表更新数据

1 个答案: