如何将带有只读列的可编辑表插入angular js的选项卡视图中

Question

我正在使用javascript，bootstrap，angularjs创建具有可编辑选项卡名称的选项卡视图，并带有添加/删除选项卡的选项（已完成）以及每个选项卡中的可编辑表格（可完成）。我很难找到示例，其中在所有选项卡中都放置了带有只读列的动态可编辑表（下面的表屏幕截图示例）。我想知道是否有人实现了类似的示例或有指导性的示例，感谢您的帮助。另外，我还附有每个商店标签的表格视图的屏幕快照，此处所有标签页的第1列都是相同的（只读），第2列中的值是可编辑的，这是指向我的标签视图代码的链接。

html

<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>

Answer 1

Updated&nbsp;your&nbsp;code,&nbsp;Check&nbsp;here在这里检查您的代码