Question

当我点击编辑按钮时，它会传递ID，但数据不会传到HTML字段。查看image。

索引

@{
    ViewBag.Title = "AngularJs Tutorial";
}
<style>

</style>
<h2>AngularJs Tutorial : CRUD operation</h2>
<div ng-app="mvcapp" ng-controller="DemoController">
    <form name="myform">
        <table class="table">
            <tr>
                <td>Name :</td>
                <td>
                    <input type="text" ng-model="empModel.name" name="name" placeholder="Name" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Phone :</td>
                <td>
                    <input type="text" ng-model="empModel.Phone" placeholder="Phone" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Salary :</td>
                <td>
                    <input type="text" ng-model="empModel.Salary" name="salary"  placeholder="Salary" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Department :</td>
                <td>
                    <input type="text" ng-model="empModel.Department" name="department" placeholder="Department" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Email :</td>
                <td>
                    <input type="email" ng-model="empModel.EmailId" class='form-control' placeholder="Email"  />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="Save" id="btnsave" ng-disabled="isDisabledsave" ng-click="myform.$valid && saveCustomer()" />
                    <input type="button" value="Update" id="btnupdate" ng-disabled="isDisabledupdate" ng-click="myform.$valid && updateCustomer()" />
                </td>
            </tr>
        </table>
    </form>
    <table>
        <tr>
            <th>S.No</th>

            <th>
                Name
            </th>
            <th>
                Phone
            </th>
            <th>
                Department
            </th>
            <th>
                Salary
            </th>
            <th>
                Email
            </th>
        </tr>
        {{employees}}
        <tr ng-repeat="empModel in employees">
            <td>{{empModel.id}}</td>
            <td>{{empModel.name }}</td>
            <td>{{empModel.phone }}</td>
            <td>{{empModel.department}}</td>
            <td>{{empModel.salary }}</td>
            <td>{{empModel.emailId}}</td>
            <td>
                <a href="" ng-click="getCustomer(empModel)" title="Delete Record">Edit</a>  |
                <a href="" ng-click="deleteemp(empModel)" title="Delete Record">
                    Delete
                </a>
            </td>
        </tr>
    </table>

</div>

<style>
    input[type=button][disabled=disabled] {
        opacity: 0.65;
        cursor: not-allowed;
    }

    table tr th {
        padding: 10px 30px;
    }

    table tr td {
        padding: 10px 30px;
    }
</style>

AngularJS

<script src="~/lib/angular/angular.js"></script>
@*<script src="~/lib/angular-route/angular-route.js"></script>*@
<script>
    var angular = angular.module('mvcapp', []);

    angular.controller('DemoController', function ($scope, $http) {

        GetAllData();
        $scope.isDisabledupdate = true;
        //Get All Employee
        function GetAllData() {
            $http.get('/Demo/GetEmployee').then(function (data) {
                $scope.employees = data.data;
                console.log($scope.employees);
            });
        };

        //Insert Employee
        $scope.saveCustomer = function () {

            $http({
                method: 'POST',
                url: '/Demo/InsertEmployee',
                data: JSON.stringify($scope.empModel),
                dataType: 'json'

            }).then(function () {
                console.log($scope.empModel);
                    GetAllData();
                    $scope.empModel =null;
                    alert("Employee Added Successfully!!!");
            }).then(function () {
                alert(data.errors);
            });
            GetAllData();
        };

        //Delete Employee
        $scope.deleteemp = function (empModel) {

            varIsConf = confirm('Want to delete ' + empModel.Name + '. Are you sure?');
            if (varIsConf) {
                $http.delete('/Demo/DeleteEmployee/' + empModel.Id).then(function () {
                    $scope.errors = [];
                    GetAllData();
                    alert(empModel.Name + " Deleted Successfully!!!");
                }).then(function () {
                    alert(data.errors);
                });
            }
        };

        //Get Employee by id to edit
        $scope.getCustomer = function (empModel) {
            $http.get('/Demo/getByid/' + empModel.id)
            .then(function (data, status, headers, config) {
                //;
                $scope.empModel = data;
                GetAllData();
                $scope.isDisabledsave = true;
                $scope.isDisabledupdate = false;
            })
            .then(function () {
                alert(data.errors);
            });
        };

        //Update Employee
        $scope.updateCustomer = function () {

            $http({
                method: 'POST',
                url: '/Demo/UpdateEmployee',
                data: $scope.empModel
            }).then(function () {
                GetAllData();
                $scope.isDisabledsave = false;
                $scope.isDisabledupdate = true;
                $scope.empModel = null;
                alert("Employee Updated Successfully!!!");
            }).then(function () {
                alert(data.errors);
            });
        };

    });
</script>

控制器

public class DemoController : Controller
    {
        private ApplicationDbContext db;

    public DemoController(ApplicationDbContext context)
    {
        db = context;
    }
    public ActionResult Index()
    {
        return View();
    }
    public JsonResult GetEmployee()
    {
        var emp = db.Employees.ToList();
        return Json(emp);
    }
    [HttpPost]
    public JsonResult InsertEmployee([FromBody] Employee emp)
    {
        db.Employees.Add(emp);
        db.SaveChanges();

        return Json(emp);
    }

    [HttpPost]
    public JsonResult UpdateEmployee(int id, string name, string department, int phone, int salary, string emailId)
    {
        var emp = db.Employees.Where(x => x.Id == id).FirstOrDefault();
        emp.name = name;
        emp.Phone = phone;
        emp.Department = department;
        emp.Salary = salary;
        emp.EmailId = emailId;
        db.SaveChanges();
        return Json(emp);
    }
    [HttpDelete]
    public JsonResult DeleteEmployee(int id)
    {
        Employee emp = db.Employees.Find(id);
        db.Employees.Remove(emp);
        db.SaveChanges();
        return Json(emp);
    }
    [HttpGet]
    public JsonResult getByid(int id)
    {
        Employee emp = db.Employees.Find(id);
        return Json(emp);
    }
}

Answer 1

 $scope.empModel = data;

你的getCostumer函数中的这一行不会工作你可能需要这样的东西来更新你的模型

 $scope.employees[indexOfTheSelected] = data;

需要将值传递给我的HTML字段

1 个答案: