我目前正在学习 AngularJS 并正在构建一个地址簿。我有一个编辑按钮,第一次可以正常工作,但下一次就不行了。它只向我显示这个我不明白的错误。
TypeError: l is not a function
at angular.js:12234
at f (angular.js:22824)
at k.$eval (angular.js:14287)
at k.$apply (angular.js:14385)
at HTMLButtonElement.<anonymous> (angular.js:22829)
at HTMLButtonElement.dispatch (jquery-3.1.1.min.js:3)
at HTMLButtonElement.q.handle (jquery-3.1.1.min.js:3)
(anonymous) @ angular.js:11496
这是我的最小代码。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="studentContoller" class="container">
<h1> List of places</h1>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Address</th>
<th>Postal code</th>
<th>City</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in addressBook">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.address}}</td>
<td>{{item.postal_code}}</td>
<td>{{item.id}}</td>
<td>
<button ng-show="item.isEditing != true" type="button" class="btn btn-primary btn-sm" ng-click="edit(item)">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button ng-show="item.isEditing === true" type="button" class="btn btn-success btn-sm" ng-click="submit(edit)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button ng-show="item.isEditing === true" type="button" class="btn btn-danger btn-sm" ng-click="cancelEdition(item)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
function studentContoller($scope,$http){
$scope.edit = function(item){
item.isEditing = true;
$scope.edit = JSON.parse(JSON.stringify(item)); // dirty deep copy
}
$scope.cancelEdition = function(item){
item.isEditing = false;
}
$scope.submit = function(item){
item.isEditing = false;
}
$scope.addressBook = [
{"id": 187, "name": "Le Goff Raymond SA", "address": "8, place Diallo","postal_code": "93 224","city": "Paul"},
{"id": 188,"name": "Gay","address": "2, rue de Deschamps","postal_code": "43092","city": "Pinto"},
{"id": 190,"name": "Le Guillet","address": "8, chemin Payet","postal_code": "59 633","city": "Leclercq"},
{"id": 191,"name": "Delorme S.A.R.L.","address": "864, impasse Lesage","postal_code": "00 950","city": "Gaudin"},
{"id": 192,"name": "Normand SARL","address": "chemin de Lesage","postal_code": "90962","city": "Dufour-sur-Petitjean"},
{"id": 193,"name": "Lucas SARL","address": "21, boulevard Deschamps","postal_code": "84196","city": "Joubert-les"}
]
}
angular.module("MyApp",[])
.controller("studentContoller",studentContoller);
</script>
</body>
</html>
所以我有两个问题,我做错了什么?以及如何调试它。
提前致谢,
最佳答案
您正在将 JSON.parse 结果设置为与函数相同的名称。这就是为什么第二次就不起作用了。您必须使用不同的名称。
$scope.edit = function(item){
item.isEditing = true;
$scope.edit_test = JSON.parse(JSON.stringify(item)); // dirty deep copy
}
关于javascript - AngularJS 编辑按钮只能工作一次,然后出现 TypeError : l is not a function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41857912/