根据我之前的帖子：Angular loop is not updating，我稍微更新了代码，为用户的按钮添加了一个对话框。
我的app.js文件中唯一的变化是添加$ mdDialog框的指令。所以我的app.js文件的完整代码是：
var app = angular.module('AddUser', ['ngMaterial']);
app.controller('AppCtrl', function($scope, $http, $mdDialog){
$scope.userInfo = [];
/** function to add details for a user in mysql referecing php **/
$scope.save_user = function() {
$http.post('db.php?action=add_user',
{
'user_name' : $scope.user_name,
'user_email' : $scope.user_email
}
)
.success(function (data, status, headers, config) {
$scope.userInfo.push(data);
$scope.get_user(); //this will fetch latest record from DB
console.log("The user has been added successfully to the DB");
console.log(data);
})
.error(function(data, status, headers, config) {
console.log("Failed to add the user to DB");
});
}
/** function to get info of user added in mysql referencing php **/
$scope.get_user = function() {
$http.get('db.php?action=get_user').success(function(data)
{
$scope.userInfo = data;
console.log("You were succesfull in showing user info");
//$scope.get_user(); //this will fetch latest record from DB
})
}
/** function to delete a user from list referencing php **/
$scope.delete_user = function(index) {
$http.post('db.php?action=delete_user',
{
'user_index' : index
}
)
.success(function (data, status, headers, config) {
$scope.get_user();//this will fetch latest record from DB
console.log('Deletion was succesfull');
})
.error(function(data, status, headers, config) {
console.log("You were NOT succesfull in deleting a user");
});
}
$scope.showPopUp= function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'popup.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
})
};
function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
}
$scope.save_user = function() {
$mdDialog.hide();
}
}
});
我必须在get_user函数中注释掉以下代码（$ scope.get_user（）;）否则我无法执行删除但是另一方面循环没有更新。所以要么我在de get_user函数中注释$ scope.get_user（）然后我可以删除用户或者我没有注释掉它，当我添加新用户时循环将更新但是删除功能没有工作...
我的HTML代码是：
<body ng-controller="AppCtrl">
<div>
<ul ng-init="get_user()">
<li ng-repeat="user in userInfo ">{{user.user_name}}<a href="#" ng-
click="delete_user(user.id)"> --> Delete</a></li>
</ul>
</div>
<md-button class="md-primary md-raised" ng-click="showPopUp($event)" flex
flex-md="100">Add a user</md-button>
</body>
并且对话框（popup.tmpl.html）的代码如下：
<md-dialog aria-label="Add or invite a user" ng-app="AddUser">
<form ng-controller="AppCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Add or invite a user</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeDialog()">
<md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close
dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div>
<div layout="" layout-sm="column">
<md-input-container flex="">
<label>Enter a name</label>
<input name="user_email" ng-model="user_name">
</md-input-container>
</div>
<div layout="" layout-sm="column">
<md-input-container flex="">
<label>Enter an e-mail</label>
<input name="user_name" ng-model="user_email">
</md-input-container>
</div>
</div>
</md-dial
<div class="md-actions" layout="row">
<md-button ng-click="closeDialog()" class="md-primary">Cancel</md-
button>
<md-button ng-click="save_user()" name="add_user" class="md-
primary">Add</md-button>
</div>
</form>
</md-dialog>
答案 0 :(得分：1)
检查我的代码段。
var app = angular.module('AddUser', ['ngMaterial']);
app.run(['$templateCache',
function($templateCache) {
$templateCache.put('popup.tmpl.html', '<md-dialog aria-label="Add or invite a user" ng-app="AddUser">' +
'<form ng-controller="AppCtrl">' +
'<md-toolbar>' +
'<div class="md-toolbar-tools">' +
'<h2>Add or invite a user</h2>' +
'<span flex></span>' +
'<md-button class="md-icon-button" ng-click="closeDialog()">' +
'<md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close dialog"></md-icon>' +
'</md-button>' +
'</div>' +
'</md-toolbar>' +
'<md-dialog-content>' +
'<div>' +
'<div layout="" layout-sm="column">' +
'<md-input-container flex="">' +
'<label>Enter a name</label>' +
'<input name="user_email" ng-model="user_name">' +
'</md-input-container>' +
'</div>' +
'<div layout="" layout-sm="column">' +
'<md-input-container flex="">' +
'<label>Enter an e-mail</label>' +
'<input name="user_name" ng-model="user_email">' +
'</md-input-container>' +
'</div>' +
' </div>' +
'</md-dialog-content>' +
'<div class="md-actions" layout="row">' +
'<md-button ng-click="closeDialog()" class="md-primary">' +
'Cancel' +
'</md-button>' +
'<md-button ng-click="save()" name="add_user" class="md-primary">' +
'Add' +
'</md-button>' +
'</div>' +
'</form>' +
'</md-dialog>');
}
]);
app.factory('UsersService', ['$q',
function($q) {
var service = {};
service.data = [{
user_name: 'Stack Overflow',
id: 1
}];
service.get = function() {
var deferred = $q.defer();
deferred.resolve(service.data);
return deferred.promise;
}
service.save = function(data) {
var deferred = $q.defer();
data.id = Math.floor((Math.random() * 999) + 111);
service.data.push(data);
deferred.resolve();
return deferred.promise;
}
service.delete = function(user) {
var deferred = $q.defer();
alert('deleting user ' + user.id);
var index = service.data.indexOf(user);
service.data.splice(index, 1);
deferred.resolve();
return deferred.promise;
}
return service;
}
]);
app.controller('AppCtrl', function($scope, $http, $mdDialog, UsersService) {
$scope.userInfo = [];
function getUsers() {
UsersService.get().then(function(data) {
_this.userInfo = data;
});
}
getUsers();
this.showPopUp = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'popup.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
})
};
this.delete_user = function(user) {
UsersService.delete(user).then(function() {
getUsers();
});
};
$scope.save = function() {
var obj = {
'user_name': $scope.user_name,
'user_email': $scope.user_email
};
UsersService.save(obj).then(function() {
getUsers();
$mdDialog.hide();
});
}
function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
}
}
var _this = this;
});<!DOCTYPE html>
<html lang="en" ng-app="AddUser">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test 1 - Add user</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="AppCtrl as _">
<div>
<ul>
<li ng-repeat="user in _.userInfo ">{{user.user_name}} [{{user.id}}]<a href="#" ng-click="_.delete_user(user)"> --> Delete</a>
</li>
</ul>
</div>
<md-button class="md-primary md-raised" ng-click="_.showPopUp($event)" flex="" flex-md="100">
Add a user
</md-button>
<!-- <button type="button" id="btnAddUser" class="btn btn-primary">Add User</button> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script src="js/app.js"></script>
</body>