如何通过单击 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');
    });
 }
});

我删除方法的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

这将取决于您的用户界面的外观。删除很简单，只需在控制器中声明一个函数并将行的索引传递给函数，如下所示：

在您的控制器中：

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

在您看来：使用 ng-click 代替 onclick

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

//这样就可以实现了

$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});            
    }