Javascript 当我在angularjs中未定义时，如何将数组值放入控制器_Javascript_Angularjs

Javascript 当我在angularjs中未定义时，如何将数组值放入控制器

javascript angularjs

Javascript 当我在angularjs中未定义时，如何将数组值放入控制器,javascript,angularjs,Javascript,Angularjs,我正在处理angularjs路由，我在工厂中有一个员工数组，homecontroller在查看和查看html页面中显示这些数组（如果我的序列或构造错误，请更正我）。我对它们进行编辑和添加员工操作。在执行编辑操作时，只要单击编辑链接，它就会转到edit.html页面，并且视图由EditController控制。但是，我希望文本框包含并保留原始值，如empId:1、empName:John、empLocation:Mumbai（当在edit.html页面中时），但所有的值都不会出现。请帮忙 app.

我正在处理angularjs路由，我在工厂中有一个员工数组，homecontroller在查看和查看html页面中显示这些数组（如果我的序列或构造错误，请更正我）。我对它们进行编辑和添加员工操作。在执行编辑操作时，只要单击编辑链接，它就会转到edit.html页面，并且视图由EditController控制。但是，我希望文本框包含并保留原始值，如empId:1、empName:John、empLocation:Mumbai（当在edit.html页面中时），但所有的值都不会出现。请帮忙

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"
    })


   }])

雇员服务厂添加控制器编辑控制器 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>

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

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

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

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

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

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

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


编辑页面



empId：
empName名称：
就业：
编辑

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

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

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

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


雇员

您不应该使用

ng值。您可以使用$scope.editDisplay
变量作为模型。您可以像这样更改代码
edit.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>

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

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

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

您不应该使用ng值
。您可以使用$scope.editDisplay
变量作为模型。您可以像这样更改代码
edit.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>

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

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

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

您需要像这样更改editcontroller
：
angular.module("Swabhav.Employee")
           .controller("EditController",
    ["$scope","EmployeeService","$log","$window","$routeParams",
           function($scope,EmployeeService,$log,$window,$routeParams){
            $scope.param1 = $routeParams.empId;
            $scope.employeeData=EmployeeService.displayAll();
            $scope.empIdvalue = $routeParams.empId;
            $scope.editDisplay=
                 EmployeeService.getById($scope.empIdvalue);
            $scope.param2 = $scope.editDisplay[0]["location"];
            $scope.param3 = $scope.editDisplay[0]["name"];


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

            }])

obj.getById = function(Id){
        return employees.filter(function(value,key){
            if(value.empId==Id)
                 return 1;
            else
                 return 0;
        })

       }

param1
param2
和param3
将在edit.html
中的ng模型中使用
<article>
  <h3>Edit Page</h3>
  <br><br>
   empId:<input type="text" disabled="disabled" ng-model="param1">
   empName:<input type="text" ng-value="editDisplay[0]['name']" ng-model="param2">
  empLocation:<input type="text"  ng-value="editDisplay[0]['location']" ng-model="param3">
  <button type="button"  ng-click="edit(editDisplay[0]['empId'],param2,param3)">Edit</button>

  </article>
  <a href=".">return</a>

最后，editEmployee
函数中还有另一个重要的变化，您似乎把它混为一谈了
obj.editEmployee=function(employeeId,employeeName,employeeLocation){
       var index=employees.map((id)=>id.empId).indexOf(employeeId);
        if(index != -1){

                $log.log("edit employee = "+ employees.map((id)=>id.name)[index])

                employees[index].empId=employeeId;
                employees[index].name=employeeName;
                employees[index].location=employeeLocation;

            }

        return employees;
     }

您需要像这样更改您的editcontroller
：
angular.module("Swabhav.Employee")
           .controller("EditController",
    ["$scope","EmployeeService","$log","$window","$routeParams",
           function($scope,EmployeeService,$log,$window,$routeParams){
            $scope.param1 = $routeParams.empId;
            $scope.employeeData=EmployeeService.displayAll();
            $scope.empIdvalue = $routeParams.empId;
            $scope.editDisplay=
                 EmployeeService.getById($scope.empIdvalue);
            $scope.param2 = $scope.editDisplay[0]["location"];
            $scope.param3 = $scope.editDisplay[0]["name"];


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

            }])

obj.getById = function(Id){
        return employees.filter(function(value,key){
            if(value.empId==Id)
                 return 1;
            else
                 return 0;
        })

       }

param1
param2
和param3
将在edit.html
中的ng模型中使用
<article>
  <h3>Edit Page</h3>
  <br><br>
   empId:<input type="text" disabled="disabled" ng-model="param1">
   empName:<input type="text" ng-value="editDisplay[0]['name']" ng-model="param2">
  empLocation:<input type="text"  ng-value="editDisplay[0]['location']" ng-model="param3">
  <button type="button"  ng-click="edit(editDisplay[0]['empId'],param2,param3)">Edit</button>

  </article>
  <a href=".">return</a>

最后，editEmployee
函数中还有另一个重要的变化，您似乎把它混为一谈了
obj.editEmployee=function(employeeId,employeeName,employeeLocation){
       var index=employees.map((id)=>id.empId).indexOf(employeeId);
        if(index != -1){

                $log.log("edit employee = "+ employees.map((id)=>id.name)[index])

                employees[index].empId=employeeId;
                employees[index].name=employeeName;
                employees[index].location=employeeLocation;

            }

        return employees;
     }

您的控制台是否打印$scope.employeeData…
？否…它打印==>[对象对象对象]，[对象对象对象]，[对象对象对象]，[对象对象对象]，[对象对象对象对象]您的控制台是否打印$scope.employeeData…
？否…它打印==>[对象对象对象对象对象对象对象]，[对象对象对象对象对象对象]，[对象对象对象对象]，[对象对象对象对象]，[对象]我希望原始值显示在文本框中，因此我使用了ng值。你的回答不是我问题的答案。无论如何谢谢你@java_jazz$scope.editDisplay
变量具有原始值，并在输入中用作模型，这将在文本框中显示这些值。我希望原始值显示在文本框中，因此我使用了ng值。你的回答不是我问题的答案。无论如何谢谢你@java_jazz$scope.editDisplay
变量具有原始值，并且在输入中用作模型，这将在文本框中显示这些值。感谢帮助。但上面是一段代码，editEmployee需要复制粘贴，因为它似乎不起作用。另外，这是angularjs>>employees.map（（id）=>id.empId.indexOf（employeeId）的有效语法吗；这是一个有效的js，它正在工作。我在网上做了一个演示@谢谢你的帮助。但上面是一段代码，editEmployee需要复制粘贴，因为它似乎不起作用。另外，这是angularjs>>employees.map（（id）=>id.empId.indexOf（employeeId）的有效语法吗；这是一个有效的js，它正在工作。我在网上做了一个演示@爪哇爵士