0

Есть приложение, потихоньку перевожу его на использование 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>
5
  • что получается с сервера?
    – Grundy
    28 окт 2016 в 8:52
  • @Grundy с сервера возвращаю json
    – Bald
    28 окт 2016 в 8:52
  • а самих вкладок много?
    – Grundy
    28 окт 2016 в 8:53
  • @Grundy я пока предполагаю что 1-3
    – Bald
    28 окт 2016 в 8:54
  • тогда самый простой вариант - делай их руками, без ng-repeat На вкладках
    – Grundy
    28 окт 2016 в 8:56

1 ответ 1

0

Можно создать директиву которая будет хранить шаблоны для всех типов, куда будете передавать данные вкладки с типом который будет определять шаблон.

Примерно так:

function ngContent($compile) {
    return {
        restrict: 'E',
        scope: {
            data: "="
        },
        replace: true,
        link: (scope, element, attrs) => {

            var templates = {
                'image_horizontal' : "<div><span>template1 {{data.name}}</span></div>",
                'image_vertical' : "<div><span>template2 {{data.name}}</span></div>"),
                'gallery_fullscreen' : "<div><span>template3 {{data.name}}</span></div>"),
            };

            // Сервис $compile представляет функцию, генерирующую контент из фрагментов html
            element.html($compile(templates[scope.data.type])(scope));

        }
    }
}

И вызываем директиву:

<ng-ontent data="tab"></ng-ontent>
2
  • если в коде используются какие-то специализированные вещи, про которых ничего не в вопросе, например require('jade!./views/image_horizontal.jade') стоит добавить описание что это такое и зачем
    – Grundy
    3 ноя 2016 в 14:19
  • да и само решение по сути: ng-include своими руками
    – Grundy
    3 ноя 2016 в 14:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.