angular js写增删改查代码实现
时间: 2023-10-20 10:55:44 浏览: 79
下面是使用AngularJS实现增删改查的示例代码:
HTML模板:
```html
<div ng-app="myApp" ng-controller="myCtrl">
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<button ng-click="editUser(user)">编辑</button>
<button ng-click="deleteUser(user)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加/编辑用户</h2>
<form ng-submit="saveUser()">
<label>姓名:</label>
<input type="text" ng-model="currentUser.name" required />
<br />
<label>年龄:</label>
<input type="number" ng-model="currentUser.age" required />
<br />
<button type="submit">保存</button>
</form>
</div>
```
AngularJS控制器:
```javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
];
$scope.currentUser = {};
$scope.editUser = function(user) {
$scope.currentUser = angular.copy(user);
};
$scope.saveUser = function() {
if ($scope.currentUser.name && $scope.currentUser.age) {
if ($scope.currentUser.hasOwnProperty('$index')) {
$scope.users[$scope.currentUser.$index] = angular.copy($scope.currentUser);
} else {
$scope.users.push(angular.copy($scope.currentUser));
}
$scope.currentUser = {};
}
};
$scope.deleteUser = function(user) {
var index = $scope.users.indexOf(user);
if (index > -1) {
$scope.users.splice(index, 1);
}
};
});
```
上述代码实现了一个简单的用户列表,包含姓名和年龄字段。用户可以添加、编辑和删除用户信息。使用ng-repeat指令在表格中显示用户列表,通过ng-click指令调用相应的方法进行编辑和删除操作,ng-model指令绑定用户输入的数据。保存时,根据当前用户是否包含索引属性来判断是新增还是编辑操作。