I am new to AngularJS. So, I am creating an app where I have a list of users that when a button is clicked, it need to remove that user from its list. The users are getting from a backend API. However, for some reason, the user is not being removed from the list when the "Confirm button" is clicked.
Here is my code
about.html
<div ng-controller="MyCtrl">
<div ng-repeat="person in userInfo.users | filter : {id: userId}">
<a class="back" href="#/user">Back</a>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>
<a class="delete" ng-click="confirmClick(); confirmedAction($index);" confirm-click>Confirm</a>
<div class="people-view">
<h2 class="name">{{person.firstName}}</h2>
<h2 class="name">{{person.lastName}}</h2>
<span class="title">{{person.email}}</span>
<span class="date">{{person.website}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Main Users</legend>
<b>First Name:</b>
<input type="text" ng-model="person.firstName">
<br>
<b>Last Name:</b>
<input type="text" ng-model="person.lastName">
<br>
<b>Email:</b>
<input type="email" ng-model="person.email">
<br>
</fieldset>
</form>
</div>
</div>
</div>
App.js
var app = angular.module("MainPortal", ['ngRoute', 'ui.bootstrap' ]);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function(index) {
$scope.userInfo.users.splice(index.id, 1);
location.href = '#/user';
};
});
app.directive('confirmClick', ['$q', 'dialogModal', function($q, dialogModal) {
return {
link: function (scope, element, attrs) {
var ngClick = attrs.ngClick.replace('confirmClick()', 'true')
.replace('confirmClick(', 'confirmClick(true,');
scope.confirmClick = function(msg) {
if (msg===true) {
return true;
}
confirm?')
msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?';
dialogModal(msg).result.then(function() {
scope.$eval(ngClick);
});
return false;
};
}
}
}])
.service('dialogModal', ['$modal', function($modal) {
return function (message, title, okButton, cancelButton) {
cancelButton = cancelButton===false ? false : (cancelButton ||
'No');
okButton = okButton ===false ? false : (okButton || 'Yes');
var ModalInstanceCtrl = function ($scope, $modalInstance, settings)
{
angular.extend($scope, settings);
$scope.ok = function () {
$modalInstance.close(true);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
var modalInstance = $modal.open({
template: '<div class="dialog-modal"> \
<div class="modal-header" ng-show="modalTitle"> \
<h3 class="modal-title">{{modalTitle}}</h3> \
</div> \
<div class="modal-body">{{modalBody}}</div> \
<div class="modal-footer"> \
<button class="btn btn-primary" ng-click="ok()" ng-
show="okButton">{{okButton}}</button> \
<button class="btn btn-warning" ng-click="cancel()" ng-
show="cancelButton">{{cancelButton}}</button> \
</div> \
</div>',
controller: ModalInstanceCtrl,
resolve: {
settings: function() {
return {
modalTitle: title,
modalBody: message,
okButton: okButton,
cancelButton: cancelButton
};
}
}
});
return modalInstance;
}
}])
app.config(function ($routeProvider) {
$routeProvider
.when("/user", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/user/:id", {
controller: "UserController",
templateUrl: "partials/about.html"
})
.otherwise({
redirectTo: '/user'
});
});
HomeController
//var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
// if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
}, function (error) {
console.log(error)
});
// }
});
UserController
app.controller('UserController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
$scope.userId = $routeParams.id;
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
});
}]);
