Develop Reference

View not updating when splicing user from list in AngularJS

I have this problem in my app, when I use slice to remove the user from the list. However, it does not remove from the list. I am getting the user with a API url call. But for some reason, it does not remove the user from the list. Please, have a look at my code. If, you guys want the full code, I have put it in my github. I hope we both can solve this. Thank you in advance.
Here is my code:
<div ng-controller="MyCtrl">
<div ng-repeat="person in userInfo.lawyers | filter : {id: lawyerId}">
<a class="back" href="#/lawyer">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(person);" 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>Basic Info</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>
<b>Website:</b>
<input type="text" ng-model="person.website">
<br>
</fieldset>
</form>
</div>
</div>
</div>
App.js
var app = angular.module("Portal", ['ngRoute', 'ui.bootstrap' ]);
app.controller('MyCtrl', function($scope, $window) {
$scope.inactive = true;
$scope.confirmedAction = function (lawyer) {
$scope.$apply(function () {
var index = $scope.userInfo.lawyers.indexOf(lawyer);
console.log($scope.userInfo.lawyers);
$scope.userInfo.lawyers.splice(index, 1);
console.log($scope.userInfo.lawyers);
$window.location.href = '#/lawyer';
});
};
});
app.directive('confirmClick', ['$q', 'dialogModal', function($q, dialogModal) {
return {
link: function (scope, element, attrs) {
// ngClick won't wait for our modal confirmation window to resolve,
// so we will grab the other values in the ngClick attribute, which
// will continue after the modal resolves.
// modify the confirmClick() action so we don't perform it again
// looks for either confirmClick() or confirmClick('are you sure?')
var ngClick = attrs.ngClick.replace('confirmClick()', 'true')
.replace('confirmClick(', 'confirmClick(true,');
// setup a confirmation action on the scope
scope.confirmClick = function(msg) {
// if the msg was set to true, then return it (this is a workaround to make our dialog work)
if (msg===true) {
return true;
}
// msg can be passed directly to confirmClick('Are you sure you want to confirm?')
// in ng-click
// or through the confirm-click attribute on the
// <a confirm-click="Are you sure you want to confirm?"></a>
msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?';
// open a dialog modal, and then continue ngClick actions if it's confirmed
dialogModal(msg).result.then(function() {
scope.$eval(ngClick);
});
// return false to stop the current ng-click flow and wait for our modal answer
return false;
};
}
}
}])
/*
Modal confirmation dialog window with the UI Bootstrap Modal service.
This is a basic modal that can display a message with yes or no buttons.
It returns a promise that is resolved or rejected based on yes/no clicks.
The following settings can be passed:
message the message to pass to the modal body
title (optional) title for modal window
okButton text for YES button. set false to not include button
cancelButton text for NO button. ste false to not include button
*/
.service('dialogModal', ['$modal', function($modal) {
return function (message, title, okButton, cancelButton) {
// setup default values for buttons
// if a button value is set to false, then that button won't be included
cancelButton = cancelButton===false ? false : (cancelButton || 'No');
okButton = okButton ===false ? false : (okButton || 'Yes');
// setup the Controller to watch the click
var ModalInstanceCtrl = function ($scope, $modalInstance, settings) {
// add settings to scope
angular.extend($scope, settings);
// yes button clicked
$scope.ok = function () {
// alert("Lawyer is confirmed");
$modalInstance.close(true);
};
// no button clicked
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
// open modal and return the instance (which will resolve the promise on ok/cancel clicks)
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 the modal instance
return modalInstance;
}
}])
app.config(function ($routeProvider) {
$routeProvider
.when("/lawyer", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/lawyer/:id", {
controller: "LawyerController",
templateUrl: "partials/about.html"
})
.otherwise({
redirectTo: '/lawyer'
});
});

But the element is getting deleted from list right?
If yes then, Try this :
$scope.confirmedAction = function (lawyer) {
$scope.$apply(function () {
var index = $scope.userInfo.lawyers.indexOf(lawyer);
console.log($scope.userInfo.lawyers);
$scope.userInfo.lawyers.splice(index, 1);
console.log($scope.userInfo.lawyers);
$window.location.href = '#/lawyer';
});
});
Or
$scope.confirmedAction = function (lawyer) {
$timeout(function () {
var index = $scope.userInfo.lawyers.indexOf(lawyer);
console.log($scope.userInfo.lawyers);
$scope.userInfo.lawyers.splice(index, 1);
console.log($scope.userInfo.lawyers);
$state.go($state.current, {}, {reload: true});
// $window.location.href = '#/lawyer';
},1100);
});

The problem is that you don't get the index from IndexOf when you using it on an array of objects like you do. Read more about the IndexOf here.
Instead, use map and then use IndexOf on that
Try it like this:
$scope.confirmedAction = function (lawyer) {
var index = $scope.userInfo.lawyers.map(function(e) { return e.id; }).indexOf(lawyer.id);
$scope.userInfo.lawyers.splice(index, 1);
console.log($scope.userInfo.lawyers);
$window.location.href = '#/lawyer';
};
And also, the controller changes will by default be detected by the digest loop of angular so no need to use $scope.$apply.
Also, simplifyed your plunker with the basic get array list and remove function. Use that to build your way forvered
https://plnkr.co/edit/w6NuVLcqzc5Rjs7L6Cox?p=preview

Increment count with click of button while decrementing another count and vice versa without reseting to default score

I have three .js files here. This code works fine except the count scores don't correlate with the other clicking of the button. I would like to add these requirements to my code as well: Each service will store the counter that displays above/below the buttons as a property on the service. Each service will have at least 3 methods: increment, decrement, and reset, which resets the counter to 100.
The counter property in the services must NOT be directly manipulated by a controller - you should create public methods in your services to perform the operations instead, which are called by the controller.
//home.js
var app = angular.module('MyApp');
app.controller("HomeController", ['$scope', 'RedService', 'BlueService', function ($scope, $rs, $bs) {
$scope.title = "The Mighty Clicker";
$scope.redOutput = 100;
$scope.blueOutput = 100;
$scope.countRed = function () {
$rs.countUp++;
$scope.redOutput = $rs.countUp;
$bs.coundDown--;
$scope.blueOutput = $bs.coundDown;
}
$scope.countBlue = function () {
$bs.countUp++;
$scope.blueOutput = $bs.countUp;
$rs.countDown--;
$scope.redOutput = $rs.countDown;
}
}]);
//blueService.js
var app = angular.module("MyBlueService", []);
app.service("BlueService", function () {
this.countUp = 100;
this.coundDown = 100;
})
//redService.js
var app = angular.module("MyRedService", []);
app.service("RedService", function() {
this.countUp = 100;
this.countDown = 100;
})
here is my HTML code
//html
<div class="row">
<div class="col-xs-12 buttons">
<h1 class='title'>{{title}}</h1>
<button class="btn red" ng-click="countRed()">Button</button>
<h1>{{redOutput}}</h1>
<br><br><br><br><br><br>
<button class="btn blue" ng-click="countBlue()">Button</button>
<h1>{{blueOutput}}</h1>
</div>
</div>
enter image description here

Not exactly sure what the rules are but from what I understand I made a plunker:
https://plnkr.co/edit/lrMgM8lcm0FtCIQbZLlf?p=preview
It looks like the code works without needing change except for the typos :D
$scope.blueOutput = blueService.countDown;
You mispelled countDown with coundDown

As #gyc mentioned in his post, there was a typo. I have created the plunkr with the same design architecture (3 modules and each of them with a service).
RedApp and BlueApp modules are added to MainApp module as dependencies and used their in myApp's controller.
var myApp = angular.module("MainApp", ["RedApp", "BlueApp"]);
myApp.controller("MyAppController", ["$scope", "RedAppService", "BlueAppService", function($scope, $rs, $bs) {
$scope.title = "The Mighty Clicker";
$scope.redOutput = 100;
$scope.blueOutput = 100;
$scope.countRed = function() {
$rs.countUp++;
$scope.redOutput = $rs.countUp;
$bs.countDown--;
$scope.blueOutput = $bs.countDown;
}
$scope.countBlue = function() {
$bs.countUp++;
$scope.blueOutput = $bs.countUp;
$rs.countDown--;
$scope.redOutput = $rs.countDown;
}
}]);
var redApp = angular.module("RedApp", []);
var blueApp = angular.module("BlueApp", []);
redApp.service("RedAppService", function() {
this.countUp = 100;
this.countDown = 100;
});
blueApp.service("BlueAppService", function() {
this.countUp = 100;
this.countDown = 100;
});

As I understand You need to have two buttons, if click first -> it counter gets up and counter second one gets down. I have done it by starting from Your code, but I've simplified the solution, so both services has only one counter and I set services directly into scope to avoid many assignments and variables. Check my working example:
//home.js
var app = angular.module('MyApp',[]);
app.controller("HomeController", ['$scope', 'RedService', 'BlueService', function ($scope, $rs, $bs) {
$scope.title = "The Mighty Clicker";
//services to scope directly
$scope.$rs=$rs;
$scope.$bs=$bs;
$scope.countRed = function () {
$rs.count++;
$bs.count--;
}
$scope.countBlue = function () {
$bs.count++;
$rs.count--;
}
}]);
//blueService.js
app.service("BlueService", function () {
this.count = 100;//single counter
})
//redService.js
app.service("RedService", function() {
this.count = 100; //single counter
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="HomeController" class="row">
<div class="col-xs-12 buttons">
<h1 class='title'>{{title}}</h1>
<button class="btn red" ng-click="countRed()">Button</button>
<h1>{{$rs.count}}</h1>
<button class="btn blue" ng-click="countBlue()">Button</button>
<h1>{{$bs.count}}</h1>
</div>
</div>
EDIT. AFTER COMMENT.
//home.js
var app = angular.module('MyApp',[]);
app.controller("HomeController", ['$scope', 'RedService', 'BlueService', function ($scope, $rs, $bs) {
$scope.title = "The Mighty Clicker";
//services to scope directly
$scope.$rs=$rs;
$scope.$bs=$bs;
$scope.countRed = function () {
$rs.increment();
$bs.decrement();
}
$scope.countBlue = function () {
$bs.increment();
$rs.decrement();
}
$scope.reset=function(){
$bs.reset();
$rs.reset();
}
}]);
//return constructor
//create for DRY
app.service("Counter",function(){
return function(){
this.count = 100;//single counter
this.increment=function(){
this.count++;
};
this.decrement=function(){
this.count--;
};
this.reset=function(){
this.count=100;
};
};
});
//blueService.js
app.service("BlueService", ["Counter",function ($cf) {
return new $cf;
}]);
//redService.js
app.service("RedService", ["Counter",function ($cf) {
return new $cf;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="HomeController" class="row">
<div class="col-xs-12 buttons">
<h1 class='title'>{{title}}</h1>
<button class="btn red" ng-click="countRed()">Button</button>
<h1>{{$rs.count}}</h1>
<button class="btn blue" ng-click="countBlue()">Button</button>
<h1>{{$bs.count}}</h1>
<button ng-click="reset()">Reset counters</button>
</div>
</div>

angularjs calling outer controller from nested ng controllers with ng-change

I'm trying to use angularjs to create a page that does the following:
Is initially empty, save for a dropdownlist that is automatically
populated with apps.
upon selecting one of those apps, data about it will be called from
another controller to the page.
I was successfully able to get the dropdownlist to automatically populate. however, I'm having issues getting it to make the page with ng-change, which I thing is due to the nested ng-controllers. The chartappsuccessfullogins function is not being called at all in my browser. Can anyone help me? Code is below:
My main html page. Note the use of ng-init:
<div ng-controller="chartsuccessfulapploginsController">
<div ng-controller="allappsController" ng-init="add()">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect" ng-change="chartsuccessfulapploginsController.add(value)">
<option ng-repeat="option in data.availableOptions" ng-init="Index = $index" value="{{data.availableOptions[Index].id}}" ng-model="APPID" >{{data.availableOptions[Index].name}}</option>
</select>
</form>
<hr>
<p> {{data}}</p>
<p> {{data.id[0]}}</p>
<p> {{data.name[0]}}</p>
<tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>
<p>{{returnCount}}</p>
<table border = "1">
<tr>
<td>{{chartObject.data}}</td>
<td>{{returnCount}}</td>
</tr>
</table>
<div google-chart chart="chartObject" style="height:600px; width:100%;"></div>
</div>
My get all apps controller. The html page above relies on this to populate the dropdownlist.
angular.module('scotchApp').controller('allappsController',['$scope', function($scope){
var userurl='';
$scope.add = function(){
userurl = 'http://localhost:8085/rest/uafapp/appslist';
var userdata = {};
var userconfig =
{
headers: {
'Content-Type':'application/json'
}
};
var userPostRequest = $.get(userurl, userdata, userconfig);
var userjson = '{\"USER_DATA_RETRIEVED\" : \"fail\"}';
userPostRequest.done(function(userdata){
userjson = JSON.stringify(userdata);
console.log("userjson :: " + userjson);
var postResponse = jQuery.parseJSON(userjson);
$scope.returnName = postResponse['apps'];
var availableOptionsArray = [];
for(i = 0; i < postResponse['apps'].length; i++){
var availableOptions = {};
availableOptions['id'] = postResponse['apps'][i]['appId'];
availableOptions['name'] = postResponse['apps'][i]['appName'];
availableOptionsArray[i] = availableOptions;
}
var returnData = {};
returnData['repeatSelect'] = null;
returnData['availableOptions'] = availableOptionsArray;
$scope.data = returnData;
console.log($scope.returnData);
$scope.$apply()
});
};
}]);
Part of the controller that defines the chart. It's pretty long, so I didn't include the irrelevant code.
angular.module('scotchApp').controller('chartsuccessfulapploginsController',['$scope','$route','$http','AuthTokenService', function($scope, $route, $http, AuthTokenService){
var appurl = '';
var failedappurl= '';
$scope.add = function(APPID) {
...}

Is your allappsController within your chartsuccessfulapploginsController in your controller file?
It should be inside because allappsController is the child scope, and chartsuccessfulapploginsController is the parent scope. You are trying to access the parent scope from the child scope.
If it is not inside, it thinks that ng-change="chartsuccessfulapploginsController.add(value)" is a new controller.
If that is the issue, the fix would be something like this:
angular.module('scotchApp').controller('chartsuccessfulapploginsController',['$scope','$route','$http','AuthTokenService', function($scope, $route, $http, AuthTokenService){
var appurl = '';
var failedappurl= '';
$scope.add = function(APPID) {} ...
//allappsController inside chartsuccessfulapploginsController
angular.module('scotchApp').controller('allappsController',['$scope',function($scope){
var userurl='';
$scope.add = function(){ ... };
}]);
}]);
Check this out: Use ng-model in nested Angularjs controller

AngularJs doesn't update the model when the input data is changed

I have angular application which uses directives.
In the directive I have template that defines pop up modal.
Basically, it's very simple app that shows a list of book authors, and in the list there is an Edit button that opens modal box.
If I open the modal for editing the book author, and just close it, without editing the author - there is no problem.
But if I open the modal, and type something in the author input, and close it, the model is stuck with the current input value for the whole time, so if I open another author for editing, the model will not be updated.
My question is: why is this happening, and how to fix it ?
HTML
<div ng-controller="MyCtrl">
<table class="table table-hover">
<tr>
<td><b>Publisher</b></td>
<td><b>Edit Publisher</b></td>
</tr>
<tr ng-repeat="book in books">
<td>
{{book.Author}}
</td>
<td>
<span ng-click="toggleModal(book)" class="btn btn-primary">Edit</span>
</td>
</tr>
</table>
<modal-dialog info='modalShown' show='modalShown' width='600px' height='60%'>
<div ng-show="divBook">
<input type="text" name="bookAuthor" ng-model="bookAuthor" />
</div>
</modal-dialog>
</div>
Angular
var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", function($scope){
$scope.books = [{Author:"Jon Skeet"},{Author:"John Papa"},{Author:"Scott Hanselman"}];
$scope.modalShown = false;
$scope.toggleModal = function (book) {
$scope.bookAuthor = book.Author;
$scope.modalShown = !$scope.modalShown;
$scope.divBook = true;
};
});
myApp.directive('modalDialog', function () {
return {
restrict: 'E',
template: "<div class='ng-modal' ng-show='show'>"
+"<div class='ng-modal-overlay' ng-click='hideModal()'>"
+"</div>"
+"<div class='ng-modal-dialog' ng-style='dialogStyle'>"
+"<div class='ng-modal-close' ng-click='hideModal()'>X</div>"
+"<div class='ng-modal-dialog-content' ng-transclude>"
+"</div>"
+"</div>"
+"div>",
replace: true,
scope: {
show: '=info'
},
transclude: true,
link: function (scope, element, attrs) {
//scope.apply();
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function () {
scope.show = false;
};
}
};
});
So, the test case will be:
Click Edit -> change the value -> close the modal
Click Edit on another author.
JSFiddle: http://jsfiddle.net/HB7LU/17694/

The model value is changing, however you are creating a new variable and not modifying the original element of the array.
You can change that by putting a pointer of the array object in a scope variable
$scope.toggleModal = function (book) {
$scope.book = book;
$scope.modalShown = !$scope.modalShown;
$scope.divBook = true;
};
then pointing the ng-model to the .Author property of the object.
<input type="text" name="bookAuthor" ng-model="book.Author" />
See modified JSFiddle: http://jsfiddle.net/9a2jcc9u/1/

I have changed your JS fiddle, if you want to change name and it automatically changes in grid than remove angular.copy(book) and directly assign book. you can see your jsfiddle here jsfiddle
myApp.controller("MyCtrl", function($scope){
$scope.books = [{Author:"Jon Skeet"},{Author:"John Papa"},{Author:"Scott Hanselman"}];
$scope.modalShown = false;
$scope.toggleModal = function (book) {
$scope.book = angular.copy(book);
$scope.modalShown = !$scope.modalShown;
$scope.divBook = true;
};
});
your modal dialog
<modal-dialog info='modalShown' show='modalShown' width='600px' height='60%'>
<div ng-show="divBook">
<input type="text" name="bookAuthor" ng-model="book.Author" />
</div>
</modal-dialog>

try something like this
myApp.controller('MyCtrl', ['$scope',function($scope) {
//your code
}]);

My Template is not updating

MainController.js
app.controller("mainController", function($scope, $http){
$scope.movies = [];
$scope.searchFilter = '';
$scope.init = function() {
};
$scope.getMovies = function(){
var movieName = $('#MovieName').val();
var movies = getMovies(movieName); // Gets json
$scope.parseMovies(movies);
};
$scope.parseMovies = function(movies){
$scope.movies = [];
$.each(movies, function( index, value ) {
$scope.movies.push($scope.createMovie(value));
});
};
$scope.createMovie = function(json){
Movie=new Object();
Movie.id=json.id;
Movie.title=json.title;
Movie.year=json.year;
Movie.runtime=json.runtime;
return Movie;
};
});
app.js
var app = angular.module('MoviesApp',[]);
html
<body ng-controller="MovieListCtrl">
<div class="container main-frame" ng-app="MoviesApp" ng-controller="mainController">
<input type="text" id="MovieName" />
<input type="button" data-ng-click="getMovies()" />
<ul>
<li ng-repeat="movie in movies">
{{movie.title}}
</li>
</ul>
</div>
</body>
When I click the button and getMovies() is called the data is retrieved ok but the template does not get filled. Only when I click the button again does it get filled.
The thing is when it is clicked the second time, the template gets filled before the new json is retrieved (I put a breakpoint in the script).
I'm stuck