javascript - 当我在 angularjs 中未定义时，如何将数组值获取到 Controller 中

Question

我正在研究 AngularJS 路由，我在工厂有一组员工，家庭 Controller 在 View 中显示这些数组，并在 html 页面中显示这些数组(如果我的顺序或结构错误，请纠正我)。我对它们进行编辑和添加员工操作。在进行编辑操作时，一旦我单击编辑链接，它就会路由到 edit.html 页面，并且 View 由 EditController 控制。但是，我希望文本框在 edit.html 页面中包含并保留原始值，例如 empId:1、empName:John、empLocation:Mumbai，但并非所有值都出现。请帮忙。

app.js

  angular.module("Swabhav.Employee",['ngRoute'])
    .config(['$routeProvider',function($routeProvider){

     $routeProvider
     .when('/',{
         controller:"HomeController",
         templateUrl:"home.html"

     })
    .when('/add',{
        controller:"AddController",
        templateUrl:"add.html"
    })

    .when('/home',{
        controller:"HomeController",
        templateUrl:"home.html"
    })

    .when('/edit/:empId',{
        controller:"EditController",
        templateUrl:"edit.html"
    })


   }])

员工服务工厂

  angular.module("Swabhav.Employee")

  .factory("EmployeeService",["$log",function($log){

    var employees=[{"empId":1,"name":"John","location":"Mumbai"},
                   {"empId":2,"name":"Nikita","location":"Mumbai"},
                   {"empId":3,"name":"Saurab","location":"Pune"},
                    {"empId":4,"name":"Ankita","location":"Bangalore"},
                    {"empId":5,"name":"Harsh","location":"Chennai"},
                    {"empId":6, "name":"Geeta","location":"Vellore"}];

    var obj={};

    obj.displayAll=function(){
            return employees;
       }

     obj.getById = function(Id){
        var employee=[];
         $log.log("emp id = "+ Id)
        angular.forEach(employees,function(value,key){
            if(value.empId==Id){
                $log.log("inside");
                $log.log(employees);
                $log.log(value.location)

 employee.push({empId:value.empId,name:value.name,location:value.location});
            $log.log(employee)

            }
            return (employee);
        })

       }

     obj.addEmployee=function(Id,Name,Location){

         $log.log(employees)
         employees.push({empId:Id,name:Name,location:Location})
         return employees;
     }

     obj.editEmployee=function(employeeId,employeeName,employeeLocation){
       var index;
        for(index=0;index<employees.length;index++){
            if(employees.indexOf(employeeId) != -1){

                $log.log("edit employee = "+ employees[index])

                employees.empId=employeeId;
                employees.name=employeeName;
                employees.location=employeeLocation;

            }

        }
        return employees;
     }
    return obj;

  }])

家庭 Controller

   angular.module("Swabhav.Employee")
       .controller("HomeController",
  ["$scope","EmployeeService","$log","$window",function($scope,
        EmployeeService,$log,$window){

   $log.log (EmployeeService.displayAll());   

   $scope.data=EmployeeService.displayAll();


   }])

添加 Controller

   angular.module("Swabhav.Employee")
    .controller("AddController",
    ["$scope","EmployeeService","$log","$window",function($scope,
        EmployeeService,$log,$window){

        $scope.add=function(empId,name,location){
            $scope.Id=empId;
            $scope.Name=name;
            $scope.Location=location

     EmployeeService.addEmployee($scope.Id,$scope.Name,$scope.Location);
            $window.location.href = "#/home";
        }
    }])

编辑 Controller

     angular.module("Swabhav.Employee")
           .controller("EditController",
    ["$scope","EmployeeService","$log","$window","$routeParams",
           function($scope,EmployeeService,$log,$window,$routeParams){

            $scope.employeeData=EmployeeService.displayAll();

            $log.log("$scope.employeeData = "+ $routeParams.empId )
            $scope.empIdvalue = $routeParams.empId;

             $scope.editDisplay=
                 EmployeeService.getById($scope.empIdvalue);


      $log.log("EmployeeService.getById(3)"+EmployeeService.getById(3));

                $scope.edit= function(empId,name,location){
                    $scope.Id=empId;
                    $scope.Name=name;
                    $scope.Location=location

     EmployeeService.editEmployee($scope.Id,$scope.Name,$scope.Location);
                    $window.location.href = "#/home";
                }

            }])

home.html

   <article>
    <table class="table table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Location</th>
            <th> Edit </th>

        </tr>
    </thead>
    <tbody>
            <tr ng-repeat="employee in data" >

                    <td>{{employee.empId}} </td>
                    <td>{{employee.name}} </td>
                    <td>{{employee.location}}</td>
                    <td><a href="#/edit/{{employee.empId}}">Edit</a>

                 </td>

        </tr>

    </tbody>
    <br>
    <a href="#add">Add Employee</a>
    </table>

  </article>

编辑.html

 <article>
  <h3>Edit Page</h3>
  <br><br>
   empId:<input type="text" ng-value=empIdvalue ng-model="employeeId">
   empName:<input type="text" ng-value=empNamevalue ng-model="employeeName">
  empLocation:<input type="text" ng-value=empLocationvalue ng-
 model="employeeLocation">
  <button type="button"  ng-
  click="edit(employeeId,employeeName,employeeLocation)">Edit</button>
  </article>

index.html

  <html ng-app="Swabhav.Employee">
  <head>
    <title>Employee</title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
 </script>
    <script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
</head>
 <body>

     <script src="app.js"></script>
     <section ng-view></section>
  </body>
</html>

Answer 1

您不应该使用ng-value。您可以使用 $scope.editDisplay 变量作为模型。您可以像这样更改代码。

编辑.html

<article>
  <h3>Edit Page</h3>
  <br><br>
   empId:<input type="text" ng-model="editDisplay.empId">
   empName:<input type="text" ng-model="editDisplay.name">
  empLocation:<input type="text" ng-model="editDisplay.location">
  <button type="button"  ng-
  click="edit(editDisplay)">Edit</button>
</article>

编辑 Controller

angular.module("Swabhav.Employee")
           .controller("EditController",
    ["$scope","EmployeeService","$log","$window","$routeParams",
           function($scope,EmployeeService,$log,$window,$routeParams){

            $scope.employeeData=EmployeeService.displayAll();

            $log.log("$scope.employeeData = "+ $routeParams.empId )
            $scope.empIdvalue = $routeParams.empId;

             $scope.editDisplay=
                 EmployeeService.getById($scope.empIdvalue);


      $log.log("EmployeeService.getById(3)"+EmployeeService.getById(3));

      $scope.edit= function(editDisplay){   
    EmployeeService.editEmployee(editDisplay.empId,editDisplay.name,editDisplay.location);
                    $window.location.href = "#/home";
                }

  }])