json对象集合（添、删、改）

最新推荐文章于 2022-12-17 16:01:02 发布

曹振华

最新推荐文章于 2022-12-17 16:01:02 发布

阅读量1.3k

点赞数

分类专栏： javascript angularjs 文章标签： js json对象集合添删改

本文链接：https://blog.csdn.net/chadcao/article/details/40957871

版权

javascript 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

angularjs

29 篇文章 0 订阅

订阅专栏

<!doctype html>
<html ng-app="my_app">

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("my_app", []);
			app.controller('my_controller', function($scope) {
				$scope.students = [{
						id: 1,
						name: '张一'
					},
					{
						id: 2,
						name: '李二'
					}
				];
				$scope.add_student = function() { //添加
					var student = {
						id: 3,
						name: '余三'
					};
					$scope.students.push(student);
				}
				$scope.insert_student = function() { //插入
					var index = 0; //对象插入索引
					var deleteCount = 0; //删除对象个数
					var student = {
						id: 0,
						name: '马零'
					};
					$scope.students.splice(index, deleteCount, student);
				}
				$scope.delete_student = function(_id) { //删除
					var index = $scope.get_index(_id);
					$scope.students.splice(index, 1);
				}
				$scope.update_student = function(_id) { //修改
					var index = $scope.get_index(_id);
					var student = {
						id: _id,
						name: '马二'
					};
					$scope.students.splice(index, 1, student);
				}
				$scope.get_index = function(_id) { //获取对象在数组中index
					if($scope.students.length > 0) {
						for(var i = 0; i < $scope.students.length; i++) {
							if($scope.students[i].id == _id) {
								return i;
							}
						}
					}
					return -1;
				}
			});
		</script>
	</head>

	<body ng-controller="my_controller">
		<input type="button" value="add" ng-click="add_student();" />
		<input type="button" value="insert" ng-click="insert_student();" />
		<input type="button" value="delete" ng-click="delete_student(1);" />
		<input type="button" value="update" ng-click="update_student(2);" />
		<table>
			<tr ng-repeat="item in students">
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
			</tr>
		</table>
	</body>

</html>