Как вставить редактируемую таблицу со столбцом только для чтения в представление вкладки угловых JS

Question

Я работаю над созданием представления вкладок с редактируемыми именами вкладок, используя javascript, bootstrap, angularjs с возможностью добавления / удаления вкладок (уже сделано) и редактируемой таблицы в каждой вкладке (для выполнения). Мне трудно найти примеры, когда динамическая редактируемая таблица со столбцом только для чтения помещается во все вкладки (пример снимка экрана ниже). Мне было интересно, если кто-то реализовал аналогичные или есть примеры, оцените вашу помощь. Кроме того, я приложил скриншоты табличного представления для каждой вкладки магазина, здесь столбец 1 одинаков для всех вкладок (только для чтения), а значения в столбце 2 доступны для редактирования, вот ссылка на мой код представления вкладок.

.

HTML

<code><div class="container">
  <div class="page-header">
    <h1>Stores Window</h1>
  </div>
  <h3>Actions:</h3>
  <ul class="list-unstyled">
    <li>Add new stores</li>
    <li>Edit store names</li>
    <li>Delete stores </li>

  </ul>
</div>
<div ng-app="tabApp" class="container">
  <div ng-controller="MainController" class="tab-container">
    <div class="ng-isolate-scope">
      <ul class="nav nav-tabs" data-as-sortable="" data-ng-model="tabs">
        <li ng-repeat="tab in tabs" data-as-sortable-item  ng-class="tab.active ? 'active' : ''">
          <a href="" ng-click="select(tab)" class="ng-binding" data-as-sortable-item-handle>{{tab.title}}</a>
        </li>
        <li class="uib-tab-last" data-toggle="modal" data-target="#CreateNewTabModal" ng-disabled="!hasLimit">
        <a href="#">+ Add New</a>
      </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane" ng-repeat="(index,tab) in tabs" ng-class="tab.active ? 'active' : ''">
          <p class="text-right">
            <button type="button" ng-click="EditTab(index)" class="btn btn-info">
              <i class="glyphicon glyphicon-pencil"></i>
            </button>
            <button type="button" ng-click="destroyTab(index)" ng-if="tabs.length > 1" class="btn btn-danger">
              <i class="glyphicon glyphicon-remove"></i>
            </button>
          </p>
          <p class="text-center ng-scope">{{tab.content}}</p>
        </div>
      </div>
    </div>

    <div id="CreateNewTabModal" tabindex="-1" role="dialog" class="modal fade">
      <form ng-submit="CreateNewTab()" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-4 form-group">
                <label>Store Name</label>
              </div>
              <div class="col-sm-8 form-group">
                <input type="text" ng-model="field.title" ng-focus="flag=false" class="form-control" autofocus/><small ng-if="flag" class="text-danger">{{message}}</small>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
            <button type="submit" class="btn btn-primary">Create</button>
          </div>
        </div>
      </form>
    </div>
    <div id="EditTabModal" tabindex="-1" role="dialog" class="modal fade">
      <form ng-submit="UpdateTab()" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-4 form-group">
                <label>Store Name</label>
              </div>
              <div class="col-sm-8 form-group">
                <input type="text" ng-model="editableTitle" class="form-control" />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-primary">Update</button>
          </div>
        </div>
      </form>
    </div>

    <br />
    <pre>{{tabs|json}}

CSS

@import 'compass';
body {
  padding-top: 30px;
}

.tab-container {
  position: relative;
  .nav.nav-tabs {
    border-bottom: 0;
    z-index: 1;
    margin-bottom: 0;
    white-space: nowrap;
    display: block;
    > li {
      position: relative;
      background-color: #e9e7e4;
      border: 1px solid #b5b4b4;
      border-right: 0;
      color: #656d78;
      text-decoration: none;
      position: relative;
      display: block;
      padding: 0;
      float: left;
      @include border-radius(5px 15px 0 0);
      &:not(.uib-tab-last) {
        width: 200px
      }
      &.uib-tab-last {
        &[disabled="disabled"] {
          @include box-shadow(none);
          @include opacity(.6);
          &,
          > a {
            cursor: default;  
          }
        }
      }
      &:after {
        content: "";
        position: absolute;
        top: -1px;
        bottom: -1px;
        right: -25px;
        width: 40px;
        background-color: #e9e7e4;
        z-index: 1;
        border: 1px solid #b5b4b4;
        border-left: 0;
        @include border-radius(0 50px 0 0);
      }
      a {
        color: inherit;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        background-color: transparent;
        @include border-radius(0);
        border: 0;
        padding: 10px 20px 10px 30px;
        font-size: 16px;
      }
      &.active {
        a {
          color: #60b7d4;
          text-decoration: underline;   
        }
      }
      &:not(:last-child) {
        a {
        &:hover {
          color: #60b7d4;
          text-decoration: underline;            
          }
        }
      }
      &.ui-sortable-placeholder {
        height: 44px;
        &,
        &:after {
          // #F9BF6D
          background-color: #f4f2ef;
          border-color: #b5b4b4 #b5b4b4 #f4f2ef;
        }
      }
    }
    &.is-sorting {
      li[data-toggle="modal"] {
        @include opacity(.3);
      }
    }
  }
}



.tab-container {
  .nav.nav-tabs {
    > li {
      .static-tab {
        color: red;
      }
    }
  }
}

.tab-content {
  background-color: #f4f2ef;
  border: 1px solid #b5b4b4;
  padding: 15px 30px;
  //margin-left: 41px;
}

JS

(function(angular) {
  'use strict';
  angular
    .module('tabApp', ['ui.bootstrap', 'as.sortable'])
    .controller('MainController', MainController);

  MainController.$inject = ['$scope', '$timeout'];
  function MainController($scope, $timeout) {
    $scope.selectedTab = null;
    var sortableEle;
    $scope.tabs = [{
      title: 'Store 1',
      content: 'store 1  table',
      active: true
    }];
    $scope.field = {
      title: ""
    };
    $scope.flag = false;
    $scope.hasLimit = true;
    $scope.CreateNewTab = function() {      
      if ($scope.field.title === "") {
        $scope.flag = true;
        $scope.message = "Required field";
      } else {
        $scope.flag = false;
        angular.forEach($scope.tabs, function(value, key) {
          if ($scope.field.title == value.title) {
            $scope.flag = true;
          }
        });
        if (!$scope.flag) {
          if ($scope.tabs.length == 400) {
            $scope.hasLimit = false;
          }
          $scope.tabs.push({
            title: $scope.field.title,
            content: 'store table',
            active: true
          });
          $('#CreateNewTabModal').modal('hide');
          $scope.select($scope.tabs[$scope.tabs.length -1]);
          console.log($scope.tabs);
        } else {
          $scope.message = '"' + $scope.field.title + '" store already exists!';
        }
        $scope.field.title = "";
      }    
    };
    $scope.select = function(tab){
        angular.forEach($scope.tabs, function(value, key) {
          value.active = false;
        });
       tab.active = true;
    };
    $scope.EditTab = function(index) {
      $scope.selectedTab = $scope.tabs[index];
      $scope.editableTitle = $scope.selectedTab.title;
      $("#EditTabModal").modal('show');
    };
    $scope.UpdateTab = function() {
      $scope.selectedTab.title = $scope.editableTitle;
      $("#EditTabModal").modal('hide');
    };
    $scope.destroyTab = function(index) {
      $scope.tabs.splice(index, 1);
      $scope.tabs[0].active = true;
      console.log($scope.tabs);
      if ($scope.tabs.length < 5) {
        $scope.hasLimit = true;
      }
    };
  }
})(window.angular);

Answer 1

Updated your code, Check here

Проверьте свой код здесь