Question

好吧，我的bootstrap表有问题。我有一个带有2个标签的员工模态。第一个选项卡是包含当前Employees的表。当您选择任何员工时，它会将您带到具有员工详细信息的第二个选项卡。表格顶部有一个允许搜索的输入字段，如果员工不在键入名称的位置，用户可以按Enter键，它会转到详细信息选项卡为该员工创建一个新条目。当我选择了一个员工，它将我带到详细信息选项卡，我希望能够返回到表格并在需要时选择新的员工。问题是Employee是表上的空行。我需要重新打开模式才能重新出现。 plunkr

<div class="container">
<form class="form-horizontal" ng-submit="submitEmployee()" enctype="multipart/form-data">
<tabset>
  <tab heading="List" select="ClearEmployeeModalFields();">
    <div class="col-xs-12" style="margin-top:20px;width:initial">
      <div style="overflow: auto;height:190px;max-width:520px;min-width:520px" id="scrollAreaCustomers">
        <table class="table" style="">
          <tr>
            <th style="font-weight: bold;">Name</th>
          </tr>
          <tr>
            <input type="text" placeholder="New Employee" ng-model="selectedEmployee.EmployeeFirstName" ng-enter="data.static = true" />
          </tr>
          <tr ng-repeat="employee in employeeArray | filter:selectedEmployee.EmployeeFirstName" class="pointer">
            <td ng-click="setSelectedEmployee(employee);data.static = true">{{employee.EmployeeFirstName}} &nbsp; {{employee.EmployeeLastName}}</td>
          </tr>
        </table>
      </div>
    </div>
    <!--End col-xs-12-->
  </tab>

  <tab heading="Details" active="data.static">
    <div class="col-xs-12" style="margin-top:20px">
      <div class="inline-fields" style="">
        <label style="margin-left:-11px">Employee Id:</label>
        <input style="width:100px" ng-model="selectedEmployee.CompanyEmployeeId" type="text">

        <label style="margin-left:100px">Email:</label>
        <input style="width:150px" ng-model="selectedEmployee.EmployeeEmail" type="email">
      </div>
      <div class="inline-fields">
        <label style="margin-left:0px">First Name:</label>
        <input style="width:150px" ng-model="selectedEmployee.EmployeeFirstName" type="text">

        <label style="margin-left:57px">Title:</label>
        <select style="width:150px" ng-model="selectedEmployee.EmployeeTitle">
          <option value="" selected="selected">Select</option>
          <option value="Manager" ng-model="selectedEmployee.EmployeeTitle">Manager</option>
          <option value="Admin" ng-model="selectedEmployee.EmployeeTitle">Admin</option>
          <option value="OfficeBitch" ng-model="selectedEmployee.EmployeeTitle">Office Bitch</option>
        </select>
      </div>
      <div class="inline-fields">
        <label style="margin-left:1px">Last Name:</label>
        <input style="width:150px" ng-model="selectedEmployee.EmployeeLastName" type="text">

        <label style="margin-left:66px">PM:</label>
        <select style="width:150px" ng-model="selectedEmployee.EmployeeIsPM" ng-options="o.v as o.n for o in [{ n: 'No', v: false }, { n: 'Yes', v: true }]">
          <option value="true">True</option>
          <option value="false">False</option>
        </select>
      </div>
      <div class="inline-fields">
        <label style="margin-left:0px">Cell Phone:</label>
        <input style="width:150px" ng-model="selectedEmployee.EmployeeCellPhone" type="text" ui-mask="{{'(999) 999-9999'}}">

        <label style="margin-left:46px">Super:</label>
        <select style="width:150px" ng-model="selectedEmployee.EmployeeIsSuper" ng-options="o.v as o.n for o in [{ n: 'No', v: false }, { n: 'Yes', v: true }]">
          <option value="true">True</option>
          <option value="false">False</option>
        </select>
      </div>

      <div class="inline-fields">
        <label style="margin-left:-14px">Office Phone:</label>
        <input style="width:150px" ng-model="selectedEmployee.EmployeeOfficePhone" type="text" ui-mask="{{'(999) 999-9999'}}">
      </div>

    </div>
  </tab>
</tabset>
<!--End Tab Content-->
<br />
<div class="col-xs-12" style="margin-top: 220px;position:absolute">
  <input style="margin-left: 3px;  width: 70px" ng-click="updateEmployee(selectedEmployee)" type="button" value="Update" go-click="#" />
  <input style="margin-left:285px;width:70px" type="submit" value="Save" go-click="#" />
  <input style="margin-left: 20px; width: 70px" type="button" ng-if="true" data-dismiss="modal" value="Exit" go-click="#" />
</div>

控制器

 //Sync Employee Table with Input Fields "New Employee Modal
  $scope.setSelectedEmployee = function (employee) {
    $scope.selectedEmployee = employee;
  }
  //Activate tab on selection
  $scope.data = { static: false }

 //GET Employees
  EmployeeGet.query().then(function (data) {
          $scope.employeeArray = data;
             }, function (reason) {
                  errorMngrSvc.handleError(reason);
      });

  //Clear Employee Search Input Fields
    $scope.ClearEmployeeModalFields = function () {
      $scope.selectedEmployee.EmployeeCompanyId = '';
      $scope.selectedEmployee.EmployeeFirstName = '';
      $scope.selectedEmployee.EmployeeLastName = '';
      $scope.selectedEmployee.EmployeeTitle = '';
      $scope.selectedEmployee.EmployeeCellPhone = '';
      $scope.selectedEmployee.EmployeeOfficePhone = '';
      $scope.selectedEmployee.EmployeeEmail = '';
      $scope.selectedEmployee.CompanyEmployeeId = '';
      $scope.selectedEmployee.EmployeeIsSuper = '';
      $scope.selectedEmployee.EmployeeIsPM = '';
    };

Answer 1

我认为问题出在您尝试进行对象分配时。在Javascript中，原始类型按值复制，引用类型通过引用复制。

 $scope.setSelectedEmployee = function (employee) {
    $scope.selectedEmployee = employee;
};

因此，当您使用$ scope.ClearEmployeeModalFields函数删除$ scope.selectedEmployee时，它将删除$ scope.employeeArray数组中的对象，因为它共享相同的引用。

尝试将此函数替换为复制而不是指向相同的数据：

    $scope.setSelectedEmployee = function (employee) {
    angular.extend($scope.selectedEmployee, employee);
};

bootstrap表无法正常工作

1 个答案: