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>

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

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

Check your code here

如何将带有只读列的可编辑表插入角度js的标签视图

1 个答案: