Angular JS 1.3のアイコンをクリックしてセルを編集し、行を削除する方法は？

Question

まだ角張った学習者です。

私は

コードのように私のページを持っているのです。

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div ng-controller="EmpCtrl"> 
    <div> 
     <h2 align="center">Angular JS Basic Example</h2> 
     <h5 align="center">Employee List</h5> 
     <table border="1" cellpadding="10" align="center"> 
      <tr> 
       <th> 
        Edit 
       </th> 
       <th> 
        Employee Id 
       </th> 
       <th> 
        Employee Name 
       </th> 
       <th> 
        Address 
       </th> 
       <th> 
        Email Id 
       </th> 
       <th> 
        Delete 
       </th> 
      </tr> 
      <tr ng-repeat="emp in employees"> 
       <td> 
        <a href="#" class="btn btn-default btn-sm"> 
         <i class="glyphicon glyphicon-edit"></i> 
        </a> 
       </td> 
       <td> 
        {{emp.EmployeeId}} 
       </td> 
       <td> 
        {{emp.EmployeeName}} 
       </td> 
       <td> 
        {{emp.Address}} 
       </td> 
       <td> 
        {{emp.EmailId}} 
       </td> 
       <td> 
        <a href="#" 
         onclick="return confirm('Delete this Employee?');" 
         class="btn btn-default btn-sm"> 
         <i class="glyphicon glyphicon-trash"></i> 
        </a> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

私はすべての従業員を取得するためのJSコードを持っています。それはうまくいく。

app.controller("EmpCtrl", function ($scope, EmployeeService) { 
GetAllEmployee(); 

function GetAllEmployee() { 

    var getAllEmployee = EmployeeService.getEmployee(); 
    getAllEmployee.then(function (emp) { 
     $scope.employees = emp.data; 
    }, function() { 
     alert('Data not found'); 
    }); 
} 
}); 

methosを削除するには、私のASP MVCのサービスコードがある

[HttpDelete] 
    public void DeleteEmployee(int id) 
    { 
     using (DatabaseContext db = new DatabaseContext()) 
     { 
      var employeeList = db.EmployeeModels.ToList(); 
      var temp = employeeList.Find(x => x.EmployeeId == id); 
      employeeList.Remove(temp); 
      db.SaveChanges(); 
     } 
    } 

私は私がそれを行うために他のjavascript機能を追加することが必要であることを推測、編集または削除/編集をクリックしてアイコンを削除します（多分ng-clcik ??）しかし、私は正確には分からない、どのようにセルを編集したり、行を削除するには？

Answer 1

//html 
<td> 
<a href="#" 
    ng-click="delFn(emp.EmployeeId,$index)" 
    class="btn btn-default btn-sm"> 
    <i class="glyphicon glyphicon-trash"></i> 
    </a> 
</td> 

//this way u can achieve it 
$scope.delFn = function(id, index){ 
    var response = confirm('Delete this Employee?'); 
    if(response) { 
     $http.delete('url/' + id).then(function(result) { 
      result.data ? $scope.employees.splice(index, 1) : null; 
     } 
    } 
} 

Answer 2

これは、UIの外観によって異なります。簡単で削除し、ちょうどあなたのコントローラ内の関数を宣言し、このような関数への行のインデックスを渡し：お使いのコントローラで

：あなたのビューで

$scope.delFn = function(index){ 
    var response = confirm('Delete this Employee?'); 
    if(response) { 
    $scope.employees.splice(index, 1); 
    } 
} 

：代わりにonclickのを、ng-使用クリック

<td> 
    <a href="#" 
     ng-click="delFn($index)" 
     class="btn btn-default btn-sm"> 
     <i class="glyphicon glyphicon-trash"></i> 
     </a> 
    </td> 

ここで、$ indexはng-repeatから暗黙的に利用可能です。または、これを明示的に述べるために行うことができます。

<tr ng-repeat="emp in employees track by $index"> 

あなた自身で編集を把握できますか？あなたがテーブルタグを使用しているからです。ポップアップ/モーダルを作成し、編集関数の行のインデックスを渡し、$ scope.employeesから選択した従業員を取得し、選択した従業員をポップアップに表示し、入力タグで編集可能にするようです。

Answer 3

<a href="#" 
    ng-click="delFn(emp.EmployeeId)" 
    class="btn btn-default btn-sm"> 
    <i class="glyphicon glyphicon-trash"></i> 
    </a> 
</td> 

//このようuが

$scope.delFn = function(id){ 

    EmployeeService.delEmployee(id).then(function (data) { 
     GetAllEmployee(); 
    }, function() { 
     alert('Data not found'); 
    }); 
} 

が、その後

this.delEmployee= function (id) { 
     return $http.post('controller/delEmployee', data={id:id});    
    }