Есть asp.net-mvc приложение, потихоньку перевожу его на использование angular.
Подскажите как для разных вкладок сделать свой шаблон для отображения. Идея такая, на странице есть Вкладки: при смене вкладки на сервер уходит запрос который возвращает необходимые данные, но не соображу как для вкладки сделать свой шаблон для отображения полученных данных.
P.S.: что бы не подумали что я сам ничего не делал, прикладываю снипет с примером того как я хочу сделать, но без возможности использования разных шаблонов для разных вкладок.
var tabApp = angular.module("tabApp", ["ui.bootstrap"]);
tabApp.controller("tabController", function($scope){
$scope.tabs = [{
title: 'tab 1',
url:'/url1'
},{
title: 'tab 2',
url:'/url2'
}];
$scope.loadTabContent = function(tab){
tab.content = tab.title+' content';
};
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="tabApp" ng-controller="tabController">
<div class="container">
<uib-tabset active="active">
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="loadTabContent(tab)">{{tab.content}}</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Upd. сервер на запрос возвращает json
, пример желаемой разметки для отображения на первой вкладке:
<table class="table">
<tr>
<th>Производитель</th>
<th>Обозначение</th>
<th>Тип</th>
<th>Расходка</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.Vendor}}</td>
<td>{{item.Name}}</td>
<td>{{item.Type}}</td>
<td>{{item.IsConsumables}}</td>
</tr>
</table>
json