We Keep Coding

Confirm user from a remote api url in AngularJS?

so, I have this bug in my code, that I can't quite figure it out. So, my app needs to do is to click on the confirm button to remove that user from its list within the remote api url. So, when I click on confirm button, it removes the user from console.log but it does not update the view. So, please check out my code and I will be thankful for your help.
if you are visiting my plunker, please write comments here, so I can know where was the bug fixed. Thanks for your time.
Here is a full plunker: https://plnkr.co/edit/nWFi81KannLcQfratr0t
PS: in the plunker, there is a UI-Bootstrap that it need it to work with it, but plunker did not run with it so, I have comment UI-Bootstrap.
Here is some code
$scope.confirmedAction = function(person) {
var index = $scope.userInfo.lawyers.map(function(e) {
return e.id;
}).indexOf(person.id);
$scope.userInfo.lawyers.splice(index, 1);
console.log($scope.userInfo.lawyers);
// console.log($scope.userInfo);
$window.location.href = '#/lawyer';
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, people) {
if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
//console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}
});

The user isn't removed because you are removing it form client side but you didn't update the sever with the changes so after the delete the the page is reloading the data again from the server which will be the full array.
You should send this removed user back to server
Notice: the UI-Bootstrap you removed prevent the modal from injecting, but i can see the value throw the console.log

This is a full sample acutlly i used bootstrap framework in the view to handle the confirm dialog.
When user click on a item we should select it as target in this sample
our target detect by $scope.selectUser() function, after that and
when delete is confirmed we use splice the target from our array
by detect the index of the target
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", function($scope) {
$scope.users = [{
name: "John"
},
{
name: "Mike"
}
];
$scope.selectUser = function(user) {
$scope.userIs = user;
}
$scope.deleteConfirmed = function() {
$scope.users.splice($scope.users.indexOf($scope.userIs), 1);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div ng-app="app" ng-controller="ctrl">
<br />
<div class="col-lg-4 col-lg-offset-4">
<ul class="list-group">
<li class="list-group-item" ng-repeat="user in users">
{{user.name}}
<a data-toggle="modal" data-target="#myModal" class="text-danger pull-right" ng-click="selectUser(user)">Delete</a>
</li>
</ul>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete...</h4>
</div>
<div class="modal-body">
Are you sure want delete user "{{userIs.name}}"?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="deleteConfirmed()" data-dismiss="modal">do it</button>
</div>
</div>
</div>
</div>
</div>

Angularjs: Able to log data but cannot display

I am attempting to create a form that upon clicking submit calls a function that will post to a php page (which runs a query), then displays those results on the page.
If I call said function in my controller on load, I get my expected result(data presented in html table in a modal). However if I call that function upon clicking submit. I can log the data result, but it does not display on my page.
$scope.report = {};
var url = "";
// calling our submit function.
$scope.submitForm = function() {
$http.post('url.php').success(function(data) {
// Stored the returned data into scope
$scope.names = data;
console.log(data);
$('#myModal').modal();
});
};
<button type = "button" class="btn btn-success" ng-click="submitForm()" >Submit Request</button>
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered">
<tr>
<th>Name</th>
</tr>
<tr ng-repeat="name in names | filter:search_query">
<td><span>{{name.first}}</span></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Try adding a small $timeout before opening your modal (don't forget to inject $timeout to your controller):
$scope.submitForm = function() {
$http.post('url.php').success(function(data) {
// Stored the returned data into scope
$scope.names = data;
console.log(data);
$timeout(function () {
$('#myModal').modal();
},250);
});
};

Customizing Modals with angular-modal-service (AngularJS)

I'm using (angular-modal-service) to create popups and modals via a service but I would like to know how it is possible to customize them? For instance, how can I change the modal-header color or remove the "by default" lines between the header, body and footer? Thank you.
Sample of the controllers:
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, ModalService) {
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = "You said " + result;
});
});
};
});
app.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
Sample of the html:
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<div class="container" ng-app="app" ng-controller="Controller">
<h3>Angular Modal Service</h3>
<a class="btn btn-default" href ng-click="show()">Show a Modal</a>
<p>{{message}}</p>
<!-- The actual modal template, just a bit o bootstrap -->
<script type="text/ng-template" id="modal.html">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Yes or No?</h4>
</div>
<div class="modal-body">
<p>It's your call...</p>
</div>
<div class="modal-footer">
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</script>
</div>

Your question is a CSS question.
To change modal colors or borders you have to add a custom CSS.
You can play with google dev tool to change styles and see the results in real-time so you don't have to reload the page.
To change header color:
.modal-header {
background-color: red;
}
To hide border in footer:
.modal-footer {
border-top: 0px!important;
}

You can use css for that otherwise convert it into custom directive

Display dynamic content in Angular Modal from parent controller

I am using angular-modal-service. I wish to modify the content of modal body as custom input text from the user. My index.html looks like :
<head>
<link rel="import" href="notify.html">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<input type="text" ng-model="custom_text" />
<input type="button" value="Click here for notification" ng- click="showNotification()" />
</body>
</html>
My app.js :
var app = angular.module("someApp", ['angularModalService']);
app.controller("mainController", function($scope, ModalService){
$scope.showNotification = function(){
document.getElementById('my_text').innerHTML = $scope.custom_text;
alert($scope.custom_text);
ModalService.showModal({
templateUrl: "notify.html",
controller: "YesNoController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = result ? "You said Yes" : "You said No";
});
});
}
});
app.controller('YesNoController', ['$scope', 'close', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
}]);
My notify.html has :
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close(false)" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Yes or No?</h4>
</div>
<div class="modal-body">
<p><span id="my_text"></span></p>
</div>
<div class="modal-footer">
<button type="button" ng-click="close(false)" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" ng-click="close(true)" class="btn btn-primary" data-dismiss="modal">Yes</button>
</div>
</div>
I am actually trying to modify notify.html modal body in the controller by accessing it through DOM. But it is giving me the error : Cannot set property 'innerHTML' of null.
How can I do this. Please help.

First you should only manipulate the DOM in angular with directives. So your approach of accessing the DOM in this way would probably cause you problems even if it was working.
That being said. You just pass the scope value to the Modal and bind the value directly to the template with handlebars {{custom_text}}
Update .showModal Method to pass scope values:
ModalService.showModal({
templateUrl: "notify.html",
controller: "YesNoController",
inputs: {
'custom_text': $scope.custom_text
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = result ? "You said Yes" : "You said No";
});
});
Modal HTML:
<div class="modal-body">
<p><span id="my_text">{{custom_text}}</span></p>
</div>

angular/bootstrap - modal doesn't display (only backdrop changes)

I've created a directive with that contains a button and it's modal. Because it's used twice on the same page I've had to set some additional attributes that are passed to the template so I can set unique IDs. However when I click the button to display the modal, it only changes the div to use backdrop. It doesn't show the modal.
Directive
<div class="col-md-4">
<qas-modal-find-postcode address="record.Address" town="record.Town" county='record.County' post-code="record.Postcode" div="#contactDetailsPostcode" id="contactDetailsPostcode"></qas-modal-find-postcode>
</div>
Yu can see that I am passing a string with a # and one without, I am going to use these scope variables in the HTML of the directive.
myAppModule.directive('qasModalFindPostcode', ['genericService', 'commonUtilities',
function (genericService, commonUtilities) {
return {
templateUrl: 'Scripts/app/shared/qas/tmplModalQasPostcode.html',
scope: {
postCode: '=',
address: '=',
town: '=',
county: '=',
id: '#',
div: '#',
},
controller: [
'$scope', function ($scope) {
$scope.doSearch = function () {
genericService.doQueryByObj("qas", "postcode", null, null, { Address: $scope.address, Town: $scope.town, County: $scope.county }).then(function (data) {
$scope.addresses = data;
if ($scope.addresses == 0 || $scope.addresses == undefined) {
commonUtilities.addAlert('No Postcodes Found', 'info');
}
});
}
$scope.selectPostcode = function (postcode) {
$scope.postCode = postcode;
}
}
]
}
}]);
})();
HTML
<div tooltip="Find Postcode Requires Address, Town & Country">{{id}}{{div}}
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="{{div}}" ng-disabled="
address == undefined || address.length == 0 ||
county == undefined || county.length == 0 ||
town == undefined || town.length == 0" />
<div class="modal fade" id="{{id}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Postcodes for {{address}} <span class="glyphicons glyphicons-home"></span></h4>
</div>
<div class="modal-body">
<ul ng-repeat="item in addresses">
<li class="btn-link list-unstyled">
{{item.Address}}, {{item.Town}}, {{item.Postcode}}
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="false">Close</button>
</div>
</div>
</div>
</div>
I want to set in my button data target = "#string" then in my modal it has "string" without the hash.
However it doesn't work and I don't understand why.

If Id is static , then it should be written as 'Id'
HTML
<div class="modal fade" id="id" tabindex="-1" role="dialog">
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#id" ng-disabled="/>
If Id is dynamic , as id={{id}}
HTML
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#{{id}}" ng-disabled="/>
although , id is always static .

HTML
data target = "#id" as modal div has id ={{id}}