这是 HTML 表单。当我单击“编辑”按钮时，我需要将条目放回到表单中。它指向脚本函数 selectEdit()
<div ng-app="MyApp" ng-controller="mainController"> <div class=container> <form ng-submit="addItem()" name="myForm"> <br> <br> <br> <br> <h1> Add Member </h1> <div class="form-group"> <div class="col-xs-3"> <input type="text" placeholder="first name" ng-model="fname" required class="form-control" > <br> <input type="text" placeholder="last name" ng-model="lname" required class="form-control"> <br> <input type="email" placeholder="Email" ng-model="email" name="myEmail" class="form-control"> <br> <span ng-show="myForm.myEmail.$error.email"> Not a Valid Email Address </span> <input type="number" placeholder="contact number" ng-model="contact" required class="form-control"> <br> <input type="text" placeholder="address" ng-model="addres" required class="form-control"> <br> <input type="submit" value ="Submit"> </div> </div> </form> </div> <div class="container"> <h1> Address Book </h1> <hr> <table class= "table table-hover" > <br> <br> <tr> <th>Name </th> <th>Email </th> <th>Contact Number </th> <th>Address</th> <th>Options</th> </tr> <tr> <th><input type="text" ng-model="searchFname" placeholder="search"> </th> <th><input type="text" ng-model="searchEmail" placeholder="search"> </th> <th><input type="text" ng-model="searchContact" placeholder="search"> </th> <th><input type="text" ng-model="searchAddress" placeholder="search"> </th> <th><input type="text" disabled="sfd" > </th> </tr> <tr ng-repeat="x in address | orderBy: 'fname' | filter:{fname:searchFname, email:searchEmail, contact:searchContact, addres:searchAddress}"> <td> {{x.fname + " " + x.lname}} </td> <td> {{x.email}} </td> <td> {{x.contact}} </td> <td> {{x.addres = $index}} </td> <td> <input type="button" value="edit" ng-click="selectEdit($index)"> | <input type ="button" value="delete" ng-click="remove($index)"></td> </tr> </table> </div> </div>
问题是我无法将条目放回表格中。它错误无法读取未定义的属性“fname”
<script type="text/javascript"> var app = angular.module("MyApp", []); app.controller("mainController", function($scope) { $scope.x = []; $scope.address= []; $scope.fname = ""; $scope.lname = ""; $scope.email = ""; $scope.contact = ""; $scope.addres = ""; $scope.addItem = function() { $scope.address.push({ fname: $scope.fname, lname: $scope.lname, email: $scope.email, contact: $scope.contact, addres: $scope.addres }); $scope.fname = ""; $scope.lname = ""; $scope.email = ""; $scope.contact = ""; $scope.addres = ""; }; $scope.remove = function(index) { var isConfirmed = confirm("Are you sure to delete this record?"); if(isConfirmed) { $scope.address.splice(index,1); } else { return false; } }; $scope.selectEdit = function(index) { console.log(index); var chenes = getSelectedIndex(index); var list = $scope.address[chenes]; $scope.fname = list.fname; $scope.lname = list.lname; $scope.email = list.email; $scope.contact = list.contact; $scope.addres = list.addres; }; function getSelectedIndex(index){ for(var i=0; i<$scope.address.length; i++) if($scope.address[i].index==index) return i; return -1; }; }); </script>
代码中的问题与您尝试在 addres 属性中存储地址条目的索引的方式有关。您不应将索引存储在 addres 属性中，而应使用单独的属性来存储索引，例如 index 或 $index，这些属性在 ng-repeat 循环中已可用。
以下是修改代码来解决问题的方法：
<!-- Inside the ng-repeat loop, store the index using $index --> <tr ng-repeat="x in address | orderBy: 'fname' | filter:{fname:searchFname, email:searchEmail, contact:searchContact, addres:searchAddress}"> <!-- ... --> <td> {{x.addres = $index}} </td> <!-- ... --> </tr>
在上面的代码中，我们使用 $index 将每个地址条目的索引存储在 addres 属性中。
// Inside the controller $scope.selectEdit = function(index) { console.log(index); var chenes = getSelectedIndex(index); var list = $scope.address[chenes]; $scope.fname = list.fname; $scope.lname = list.lname; $scope.email = list.email; $scope.contact = list.contact; // Use the stored index to select the correct entry $scope.addres = list.addres; }; function getSelectedIndex(index){ for(var i=0; i<$scope.address.length; i++) // Compare the stored index with the passed index if($scope.address[i].addres == index) return i; return -1; };
在上面的代码中，我们将 addres 属性中存储的索引与 getSelectedIndex 函数中传递的索引进行比较，以找到地址数组中的正确条目。
通过进行这些更改，您的代码应该按预期工作，并且您应该能够编辑条目并将其放回表中。
