下面是使用
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指令绑定用户输入的数据。保存时，根据当前用户是否包含索引属性来判断是新增还是编辑操作。
本文分享了FLM_admin项目的代码资源，提供了项目地址及启动命令。读者可以自行下载npmi，通过运行npm run start来启动项目。
扫一扫
623
到【灌水乐园】发言
