javascript - AngularJS 编辑按钮只能工作一次,然后出现 TypeError : l is not a function

标签 javascript angularjs

我目前正在学习 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/

相关文章:

javascript - 更改内容并发回

javascript - 数组中的最高值(值是数组对象中的属性)

javascript - 将正则表达式从 php 转换为 javascript(回溯断言)

javascript - Nodemailer OAuth2 2LO 在 Heroku 部署中失败

javascript - 当没有键/值关联时,在 angular.js 中按字母顺序对 json 数组进行排序

node.js - 如何在 Protractor 中创建和操作 Promise?

javascript - 如何在 AngularJS 中上传多部分表单?

angularjs - ClojureScript 的客户端 MVC 框架

javascript - JS脚本加载

javascript - CSS 应该总是在 Javascript 之前吗?