使用Angular.js建立页面级CRUD

最新推荐文章于 2024-06-08 19:22:30 发布

置顶 wujindou

最新推荐文章于 2024-06-08 19:22:30 发布

阅读量5.6k

点赞数 1

分类专栏： Angular.js javascript javascript

本文链接：https://blog.csdn.net/wujindou/article/details/23859567

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Angular.js javascript

1 篇文章 0 订阅

订阅专栏

Angular.js是由谷歌提供强大的javascript框架，Angular.js也非常的好用，于是简单尝试下使用Angular.js开发简单应用。

参考文件：使用Angular.js创建Restful风格的CRUD和Angular.js搭建todoMvc

Angular.js入门级的文件网上有很多的资源可以学习和参考像：使用Angular.js单击2048游戏，从菜鸟到专家，也有很多的项目可以参考。

好了，上代码：

首先index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>AngularJs</title>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="CrudApp">
<h2>Users</h2>
<div ng-controller="ListCtrl">
<table class="table table-condensed">
  <thead>
    <tr>
      <th>Username</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users" ng-class="{ editing: user == editedTodo}">
        <div class="view">
        <td> 
              <form ng-submit="doneEditing(user)">
                  <input class="edit" ng-trim="false" ng-model="user.username" user-escape="revertEditing(todo)" ng-blur="doneEditing(user)" user-focus="user == editedTodo">
              </form>
              <style>
                  input.edit{
                      border: 1px solid transparent;
                  }
                  input.edit:focus{
                      border-color: #000;
                  }
                  </style>
        </td>
      <td>{{user.first_name}}</td>
      <td>{{user.last_name}}</td>
      <td>{{user.address}}</td>
       <td><a ng-click="deleteUser(user.id)" class="btn btn-small btn-danger">delete</a></td>
        </div>
    </tr>
  </tbody>
</table>
<div ng-show="show">
<form novalidate name="AddNewForm" id="add-new-form" method="post" action="">
  <label for="username">Username:</label>
  <input type="text" ng-model="user.username" required />
  <label for="first_name">First name:</label>
  <input type="text" ng-model="user.first_name" required />
  <label for="last_name">Last name:</label>
  <input type="text" ng-model="user.last_name" required />
  <label for="address">Address:</label>
  <input type="text" ng-model="user.address" />
  <br/>
  <button class="btn btn-primary" ng-disabled="AddNewForm.$invalid || isUnchanged(user)" id="add-new-btn" ng-click="add_new(user)">Save!</button>
  <a href="#/" class="btn" ng-click="show=!show">Cancel</a>
</form>
</div>
 <button  class="btn btn-pimary" ng-click="show=!show">Add New User</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
<script type="text/javascript" src ="/AngularProject/js/src/app.js"></script>
</body>
</html>

app.js文件

var app = angular.module('CrudApp', ['ngRoute']);
function ListCtrl($scope, $http) {
   $http.get('data/users.json').success(function(data) {
     $scope.users = data;
   });
 $scope.editedTodo = null;
 $scope.add_new = function(user,AddNewForm){
      $scope.users.push(user);
   };
  $scope.deleteUser =function(id){
     $scope.users.forEach(function(e,index){
         if(e.id == id){
             $scope.users.splice(index,1);
        }
      });
 };  
  $scope.editUser = function (user) {
        $scope.editedTodo = user;
        console.info(user);
        $scope.originalTodo = angular.extend({}, todo);
    };
     // 编辑user完成
    $scope.doneEditing = function (user) {
        // 置空
        $scope.editedTodo = null;
        user.username = user.username.trim();
        if (! user.username) {
            $scope.removeUser(user);
        }
    };
    // 恢复编辑前的user
    $scope.revertEditing = function (user) {
        todos[todos.indexOf(user)] = $scope.originalTodo;
        $scope.doneEditing($scope.originalTodo);
    };
};
app.directive('todoFocus', function todoFocus($timeout) {
	return function (scope, elem, attrs) {
		scope.$watch(attrs.todoFocus, function (newVal) {
			if (newVal) {
				$timeout(function () {
					elem[0].focus();
				}, 0, false);
			}
		});
	};
});

测试数据文件users.json

[{
  "id":"1",
  "username":"lucentx",
  "first_name":"Aron",
  "last_name":"Barbosa",
  "address":"Manila, Philippines"
},
{
  "id":"2",
  "username":"ozzy",
  "first_name":"Ozzy",
  "last_name":"Osbourne",
  "address":"England"
},
{
  "id":"3",
  "username":"tony",
  "first_name":"Tony",
  "last_name":"Iommi",
  "address":"England"
}]

最后效果图：