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

我正在使用javascript、bootstrap、angularjs创建一个选项卡视图，其中包含可编辑的选项卡名称，并提供添加/删除选项卡的选项（已完成）和每个选项卡中的可编辑表（待完成）。我很难找到在所有选项卡中放置带有只读列的动态可编辑表格的示例（下面的表格截图示例）。我想知道是否有人实现了类似的或有方向性的例子，感谢您的帮助。此外，我还附上了每个商店选项卡的表视图截图，这里第1列与所有选项卡相同（只读），第2列中的值是可编辑的，这是指向我的选项卡视图代码的链接

html

js

（函数（角度）{
"严格使用",；
有棱角的
.module（'tabApp'，['ui.bootstrap'，'as.sortable']））
.控制器（“主控制器”，主控制器）；
MainController.$inject=['$scope'，'$timeout']；
函数MainController（$scope，$timeout）{
$scope.selectedTab=null；
sortabele变种；
$scope.tabs=[{
标题：“商店1”，
内容：“存储1表”，
主动：正确
}];
$scope.field={
标题：“
};
$scope.flag=false；
$scope.hasLimit=true；
$scope.CreateNewTab=函数（）{
如果（$scope.field.title==“”）{
$scope.flag=true；
$scope.message=“必填字段”；
}否则{
$scope.flag=false；
angular.forEach（$scope.tabs，函数（值，键）{
如果（$scope.field.title==value.title）{
$scope.flag=true；
}
});
如果（！$scope.flag）{
如果（$scope.tabs.length==400）{
$scope.hasLimit=false；
}
$scope.tabs.push({
标题：$scope.field.title，
内容：“存储表”，
主动：正确
});
$（'#createnewtabmodel'）.model（'hide'）；
$scope.select（$scope.tabs[$scope.tabs.length-1]）；
log（$scope.tabs）；
}否则{
$scope.message='“+$scope.field.title+'”存储已存在！'；
}
$scope.field.title=“”；
}    
};
$scope.select=函数（选项卡）{
angular.forEach（$scope.tabs，函数（值，键）{
value.active=false；
});
tab.active=true；
};
$scope.EditTab=函数（索引）{
$scope.selectedTab=$scope.tabs[索引]；
$scope.editableTitle=$scope.selectedTab.title；
$（“#EditTabModal”）.modal（'show'）；
};
$scope.UpdateTab=函数（）{
$scope.selectedTab.title=$scope.editableTitle；
$（“#EditTabModal”）.modal（'hide'）；
};
$scope.destroyTab=函数（索引）{
$scope.tabs.splice（索引，1）；
$scope.tabs[0]。active=true；
log（$scope.tabs）；
如果（$scope.tabs.length<5）{
$scope.hasLimit=true；
}
};
}
})（窗口角度）；

---

对于Stackoverflow来说，询问示例是不合适的。相反，分解你的问题并创建一个新的解决方案。

<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}}</pre>
  </div>

</div>

@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;
}

(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);

Updated your code, Check here