Question

我有这个HTML代码，如果我点击编辑，所有字段都将变得可编辑，但我只希望特定行只能编辑而不是整个表格。

HTML COde：

<tr ng-repeat="employeeDetail in employeeDetails | filter:filterUser">
  <td>
    <!-- editable username (text with validation) -->
    <a ui-sref="Reports"><span editable-text="employeeDetail.empName" e-form="tableform" ng-click="seeDetails(employeeDetail.userId)">
                                    {{ employeeDetail.empName || 'empty' }}
                                  </span></a>
  </td>
  <td>
    <span editable-text="employeeDetail.departmentName" e-form="tableform" onbeforesave="checkName($data, user.id)">
                                    {{ employeeDetail.departmentName || 'empty' }}
                                  </span>
  </td>
  <td>
    <span editable-text="employeeDetail.empEmail" e-form="tableform" onbeforesave="checkName($data, user.id)">
                                    {{ employeeDetail.empEmail || 'empty' }}
                                  </span>
  </td>
  <td>
    <span editable-text="employeeDetail.empContact" e-form="tableform" onbeforesave="checkName($data, user.id)">
                                    {{ employeeDetail.empContact || 'empty' }}
                                  </span>
  </td>
  <td>
    <span editable-text="employeeDetail.empContact" e-form="tableform" onbeforesave="checkName($data, user.id)">
                                    NIL
                                  </span>
  </td>
  <td>No Entry Found!</td>
  <td style="padding:5px!important;">
    <i class="fa fa-trash" ng-click="deleteEmp(employeeDetail.userId)">
                                </td>
                                <td>
                                     <!-- buttons -->
                                    <div class="btn-edit">
                                      <i ng-show="!tableform.$visible" ng-click="tableform.$show(employeeDetail.userId)" class="fa fa-pencil-square add-icon" title="Edit Employee" aria-hidden="true"></i>
    <!-- <button editable-text="employeeDetail.empName">Edit</button> -->
    </div>
    <div class="btn-form" ng-show="tableform.$visible">
      <button type="submit" ng-click="updateEmployee(employeeDetail.empName)" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
      <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
    </div>
  </td>
  <!-- <td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">Del</button></td> -->
</tr>

Answer 1

我创建了自己的例子，因为你的后续内容太混乱了，但重点仍然一样。

基本上，为员工附加条件，或找到另一种方式来跟踪他们是否可编辑。完成此操作后，您只需将ng-show附加到该按钮，然后查看是否employee.editable == true。如果是，则ng-show将评估为true，并且将显示该按钮。

(function () {
    "use strict";
    var app = angular.module("EmployeeManagement", []);

    var EmployeeListCtrl = function () {
        var vm = this;
        vm.employees = [
            { 
              name: "Joe",
              code: "C",
              gender: "M",
              editable: false
            },
            {
              name: "Candy",
              code: "C",
              gender: "Female",
              editable: false
            }
        ];
                
        vm.showDelete = function(employee) {
            employee.editable = (employee.editable === true) ? false : true;
        };
        
    }
    app.controller("EmployeeListCtrl", [EmployeeListCtrl]);
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="panel-body" ng-app="EmployeeManagement">
        <table class="table" ng-controller="EmployeeListCtrl as vm">
            <thead>
                <tr>
                    <td>Product</td>
                    <td>Code</td>
                    <td>Gender</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in vm.employees">
                    <td ng-click="vm.showDelete(employee)" style="color:blue">{{ employee.name}}</td>
                    <td>{{ employee.code }}</td>
                    <td>{{ employee.gender }}</td>
                    <td width="15%">
                        <button type="button" class="btn btn-danger" ng-show="employee.editable">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

如何使用angularjs单击一下，防止所有字段都可编辑？

1 个答案: