anglejsでワンクリックで編集可能なすべてのフィールドを回避するにはどうすればいいですか？

Question

私はこのHTMLコードを持っています。編集をクリックするとすべてのフィールドが編集可能になりますが、テーブル全体ではなく編集可能にしたいだけです。

HTMLコード：

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