Обновите данные из таблицы html, используя угловой js и переключатель

0

У меня есть таблица HTML с некоторыми данными, поступающими из веб-службы, и я использую Angular, тогда у меня есть 3 переключателя для отображения 10, 20 и 30 записей из моего источника данных. 3 кнопки должны вызывать веб-сервис для каждого из них, веб-службы уже работают, но я не знаю, как сделать эти переключатели для отображения новых данных в таблице, структура этой таблицы не изменяется и потому, что Я использую 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>

Пока нет контроллера.

Теги:

1 ответ

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'];
});
Поделиться
  • 0
    Спасибо за ваше время! Позвольте мне попробовать и посмотреть, есть ли у меня вопрос :)
  • 0
    Три веб-службы должны быть объявлены внутри $ watch? @BrianBaker
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню