We Keep Coding

modalinstance inject view model to update

I am using Modal popups to list out accounts details (accno and name). once row is selected from list view model variable(vm.vismaDebitAccount) need to update which is dynamic. In actual scenario popup will be open on textbox onclick and once row is selected from popup relevant textbox text should be update with account name. The view model variable(a particular textbox binding) should be able to inject to modalinstance result without hard cord things.
Here is my code.
my problem is why vm.vismaDebitAccount is not getting update? Please help me.
Here is the place on UI binding
<tr ng-repeat="accEntry in vm.vismaAccEntries">
<td>{{accEntry.invoiceNo}}</td>
<td><input type="text" ng-model='accEntry.debitAccNo' required name="field" ng-click="vm.openVismaAccModal('debit')" /></td>
<td><input type="text" ng-model='accEntry.debitVat' required name="field" /></td>
<td><input type="text" ng-model='accEntry.creditAccNo' required name="field" ng-click="vm.openVismaAccModal('credit')"/></td>
<td><input type="text" ng-model='accEntry.creditVat' required name="field" /></td>
<td>{{accEntry.amount}}</td>
<td>{{accEntry.voucherDate}}</td>
<td>{{accEntry.dueDate}}</td>
app.controller('invoiceCodeController', ['$routeParams', 'invoiceService', 'vismaService', '$uibModal', '$log', function ($routeParams, invoiceService, vismaService, $uibModal, $log) {
var vm = this;
var vismaDebitAccount = {
catogory: '',
account: ''
}
var vismaCreditAccount = {
catogory: '',
account: ''
}
vm.openVismaAccModal = function (accountType) {
console.log('hi before')
var modalInstance = $uibModal.open({
templateUrl: 'accountPopup.html',
controller: 'vismaAccController as vm'
});
modalInstance.result.then(function (selectedAccount) {
if (accountType === 'debit') {
vm.vismaAccEntries[0].debitAccNo = selectedAccount.account.No;
}
if (accountType === 'credit') {
vm.vismaAccEntries[0].creditAccNo = selectedAccount.account.No;
}
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}]);
app.controller('vismaAccController', ['vismaService', '$uibModalInstance', function (vismaService, $uibModalInstance) {
var vm = this;
var selectedAcc = {
category: '',
account: ''
};
Init();
function Init() {
getVismaAccData();
}
vm.tabChange = function (e) {
if (e.target.nodeName === 'A') {
e.preventDefault();
}
}
vm.rowSelect = function (index, debitAcc, flag) {
selectedAcc.category = flag;
selectedAcc.account = debitAcc;
}
vm.ok = function () {
$uibModalInstance.close(selectedAcc);
};
vm.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
function getVismaAccData() {
var errors = [];
vismaService.getSuppliers().then(function (data) {
vm.vismaSuppliers = data;
},
function (errorMsg) {
errors.push('<li>' + errorMsg + '</li>');
vm.savedSuccessfully = false;
});
vismaService.getCustomers()
.then(function (data) {
vm.vismaCustomers = data;
},
function (errorMsg) {
errors.push('<li>' + errorMsg + '</li>');
vm.savedSuccessfully = false;
});
vismaService.getGeneralLedger()
.then(function (data) {
vm.vismaGL = data;
},
function (errorMsg) {
errors.push('<li>' + errorMsg + '</li>');
vm.savedSuccessfully = false;
});
if (errors.length > 0) {
vm.message = errors.join(' ');
}
}
}]);

How to display factory method value in view using angularJS

Hi,am getting Json data as per my need,when injecting factory to
controller that data I am unable to show in view in angularJs i.e
correct answer div in UI,I will be thankful if anyone can help to me
Controller code:
public JsonResult displayCorrectAnswer()
{
Db.Configuration.ProxyCreationEnabled = false;
var rs = from q in Db.questions
join a in Db.answers on q.Qid equals a.questionID
where a.isAnswer == "1"
select new { a.answer1 };
return Json(rs, JsonRequestBehavior.AllowGet);
}
>Json Data:
[
{"answer1":"4"},
{"answer1":"Modi"}
]
>Script Code:
var myApp = angular.module("QuestionDisplayModule", [])
.controller("QuestionDisplayController", function ($scope, $http, $log, answerService) {
$http.get("displayQuestion").then(function(response)
{
$log.info(response);
$scope.questionsData = response.data;
})
$scope.answerCheck = answerService.choose();
})
myApp.factory("answerService", function ($http) {
var CorrectAnswers = {};
CorrectAnswers.choose = function () {
return $http.get("displayCorrectAnswer").success(function (response) {
response.data;
})
}
return CorrectAnswers;
});
>View Code:
<body ng-app="QuestionDisplayModule">
<form>
<div ng-controller="QuestionDisplayController">
<div ng-repeat="q in questionsData" style="border:groove 1px green">
<h4 style="color: darkmagenta">{{q.QText}}</h4>
<p ng-repeat="a in q.answer1" style="color: cadetblue"><input type="radio" name="answers+{{$parent.$index}}" ng-model="q.selectedAns" value="{{a.option1}}" />{{a.option1}}</p>
<div ng-show="q.selectedAns">your answer is : {{q.selectedAns}}</div>
<div > correct Answer is : {{answerCheck.answer1}}</div>
</div>
</div>
</form>
</body>

var myApp = angular.module("QuestionDisplayModule", [])
.controller("QuestionDisplayController", function ($scope, $http, $log, answerService) {
$http.get("displayQuestion").then(function(response)
{
$log.info(response);
$scope.questionsData = response.data;
})
$scope.answerCheck = answerService.choose().then(function(response) {
$scope.answerCheck = response;
});
})
myApp.factory("answerService", function ($http) {
var CorrectAnswers = {};
CorrectAnswers.choose = function () {
return $http.get("displayCorrectAnswer")
});
>

share data between controllers angular js

Why $scope.items in First and Second controllers still have value First why it doesnot change to value From controller after invoking Load() function?
HomeController:
namespace MvcApplication6.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetData()
{
string data = "From controller";
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
Index.cshtml
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/MyScript/Custom.js"></script>
<script src="~/Scripts/angular-animate/angular-animate.min.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<div ng-controller="LoadData" id="data">
</div>
<div ng-controller="First">
{{items}}
</div>
<div ng-controller="Second">
{{items}}
</div>
<script>
$(document).ready(function () {
angular.element(document.getElementById('data')).scope().Load();
});
</script>
Custom.js
var app = angular.module('MyApp', ['ngAnimate', 'ui.bootstrap']);
app.controller('First', function ($scope, sharedProperties) {
$scope.items = sharedProperties.getProperty();
console.log("First controller",sharedProperties.getProperty());
});
app.controller('Second', function ($scope, sharedProperties) {
$scope.items = sharedProperties.getProperty();
console.log("Second controller", sharedProperties.getProperty());
});
app.controller('LoadData', function ($scope,$http, sharedProperties) {
$scope.Load = function () {
$http({ method: 'GET', url: '/Home/GetData' }).
success(function (data, status, headers, config) {
sharedProperties.setProperty(data);
console.log('Loaded data',data);
}).
error(function (data, status, headers, config) {
alert('error');
});
}
}
);
app.service('sharedProperties', function () {
var property = 'First';
return {
getProperty: function () {
return property;
},
setProperty: function (value) {
property = value;
}
};
});

The problem is that, in both First and Second controllers, the variables $scope.items are initialized when the controllers are loaded. After that moment, they are not changed any more.
The order of execution here is as follows:
controller 'First' is initialized, along with its variable $scope.items;
controller 'Second' is initialized, along with its variable $scope.items;
the callback from $http is called, but you never update the value of $scope.items on either controller.
As a possible solution, you can implement a simple callback mechanism (the standard observer pattern). For example:
app.service('sharedProperties', function () {
var property = 'First';
var callBacks = [];
return {
getProperty: function () {
return property;
},
setProperty: function (value) {
property = value;
callBacks.forEach(function(callBack) {
callBack(value);
});
},
registerCallback: function(callBack) {
callBacks.push(callBack);
}
};
});
Then you have your controllers register their callbacks:
app.controller('First', function ($scope, sharedProperties) {
sharedProperties.registerCallback(function(data) {
$scope.items = data;
});
});
Alternatively you can use Angular events to communicate across controllers.

The reason is that you are working with strings. It means that when you calling:
$scope.items = sharedProperties.getProperty();
You're getting the copy of your string. To share the data between controllers, you can modify your controllers as following:
html:
...
<div ng-controller="First">
{{items.getProperty()}}
</div>
...
js:
...
app.controller('First', function ($scope, sharedProperties) {
$scope.items = sharedProperties;
});
...
or modify your service:
app.service('sharedProperties', function () {
// having the 'object' property inside
var property = {value:'First'};
return {
getProperty: function () {
return property;
},
setProperty: function (value) {
property.value = value;
}
}});
Both these solutions works because they're copying the reference to the object which contains the value instead of copying the value itself.

Angular/Jasmin : can't get values passed while testing

I wrote a page that allows me to change my password. The code works and it does everything I want it to do, so I started writing tests. Since I'm not as experienced in Angular testing this had proven to be quite difficult and I can't get passed this error:
TypeError: 'undefined' is not an object (evaluating 'plan.apply')
at /Users/denniegrondelaers/asadventure/myproject-web/src/users/controllers/userPasswordController.js:9
at /Users/denniegrondelaers/asadventure/myproject-web/test/unitTests/specs/users/controllers/userPasswordControllerSpec.js:98
The controller:
userPasswordController.js
users.controllers.controller('userPasswordController',
['$scope', 'Session', '$state', 'UserService', 'languages',
function ($scope, Session, $state, UserService, languages) {
$scope.languages = languages;
$scope.password = "";
$scope.notEqual = false;
$scope.isSuccessful = false;
$scope.changePassword = function() {
var pw = {
userId: Session.getCurrentSession().userId,
oldPassword: encrypt($scope.password.oldPassword),
newPassword: encrypt($scope.password.newPassword),
newPasswordRepeat: encrypt($scope.password.newPasswordRepeat)
};
if (pw.newPassword === pw.newPasswordRepeat) {
$scope.notEqual = false;
UserService.setNewPassword(pw).then(function(res) {
$scope.formErrors = undefined;
$scope.isSuccessful = true;
}, function (error) {
$scope.formErrors = error.data;
}
);
} else {
$scope.notEqual = true;
}
};
var encrypt = function (password) {
var encrypted = CryptoJS.md5(password);
return encrypted.toString(CryptoJS.enc.Hex);
};
}
]
);
The service:
userService.js
userService.setNewPassword = function (password) {
return $http
.put(EnvironmentConfig.endpointUrl +
"/password/change", password)
};
The test:
userPasswordControllerSpec.js
describe('Users', function () {
describe('Controllers', function () {
fdescribe('userPasswordController', function () {
var $scope,
controller,
$q,
willResolve,
mockSession,
mockState,
mockUserService,
mockLanguages;
beforeEach(function () {
module('mysite.users.controllers');
module(function ($provide) {
$provide.value('translateFilter', function (a) {
return a;
});
$provide.value('$state', function (a) {
return a;
});
});
mockSession = {
getCurrentSession: function () {
return {userId: 4};
}
};
mockState = {
params: {
id: 1
},
go: function () {
}
};
mockLanguages = {
getLanguages : function () {
var deferred = $q.defer();
deferred.resolve({
data: [{}]
});
return deferred.promise;
}
};
mockUserService = {
setNewPassword : function () {
var deferred = $q.defer();
if (willResolve) {
deferred.resolve({
data: [{}]
});
}
return deferred.promise;
}
};
inject(function (_$q_, $controller, $rootScope) {
controller = $controller;
$q = _$q_;
$scope = $rootScope.$new();
});
controller('userPasswordController', {$scope: $scope, Session: mockSession, $state: mockState,
UserService: mockUserService, languages: mockLanguages
});
willResolve = true;
});
it('should change password', function () {
spyOn(mockUserService, 'setNewPassword').and.callThrough();
spyOn(mockState, 'go').and.callThrough();
spyOn(mockSession, 'getCurrentSession').and.callFake();
expect(mockUserService.setNewPassword).not.toHaveBeenCalled();
expect($scope.isSubmitable()).not.toBeTruthy();
$scope.compareStoreSelection = function () {
return true;
};
$scope.password = {
oldPassword: "123456",
newPassword: "password",
newPasswordRepeat: "password"
};
expect($scope.isSubmitable()).toBeTruthy();
>>> $scope.changePassword(); <<< LOCATION OF ERROR, line 98
expect(mockUserService.setNewPassword).toHaveBeenCalled();
$scope.$apply();
});
});
});
});
I've marked the line that gives the code in the test.
Anybody any idea how to fix this? A colleague suggested altering my controller code, but I'd like to keep it as it is, since it seems logical that this code shouldn't be altered for testing to work, right?
Solution
Yarons' suggestion to change the mockSession.getCurrentSession.callFake to mockSession.getCurrentSession.callThrough fixed it!

angularjs default select always changes

with angularjs select tab and ng-options,I cannot get the right default selecedValue after I selected one .
html
<select ng-model="selectedStyle" ng-options="style as style.name for style in styles"></select>
javascript
$scope.$on('openStyleList', function (event, page) {
styleListService.Get().
then(function (data) {
var tempArray = new Array();
if(page.pageType == 'Jacket')
{
tempArray.push(_.first(data))
$scope.styles = tempArray;
alert($scope.styles[0].name)//here i get the first one
$scope.selectedStyle = $scope.styles[0];//but here the $scope.selectedStyle is not always the first one! It's always the one that I selected before.I cannot set it to the default one($scope.styles[0])
}
else if (page.pageType == 'Body') {
if (_.rest(data).length == 1) {
tempArray.push(_.rest(data))
$scope.styles = tempArray;
}
else {
$scope.styles = _.rest(data);
}
alert($scope.styles[0].name)//aslo here
$scope.selectedStyle = $scope.styles[0];//aslo here
}
});
})
the styleListService code:
angular.module('editorApp')
.service('styleListService', ['$http', '$log', '$q', '$timeout', '$window', 'baseService', 'settings',
function styleListService($http, $log, $q, $timeout, $window, baseService, settings) {
var StyleListServiceFactory = {};
var _get = function () {
return baseService.get('styles/');
}
StyleListServiceFactory.Get = _get
return StyleListServiceFactory;
}]);
the part of baseService code :
var _get = function (apiPath, responsetype) {
var deferred = $q.defer();
if (responsetype == undefined)
{
responsetype = "";
}
$http.defaults.cache = false;
$http.get(settings.baseUrl + apiPath,
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
responseType: responsetype
}).success(function (response) {
deferred.resolve(response);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
baseServiceBaseFactory.get = _get;

1) Select your default value as model
you can do this like
<select tabindex="2" class="dropdown-control " id="drpSystemDeliveryCos" ng-model="selecedValue ">
<option ng-repeat="style in styles" value="{{style .ID}}">{{style .name}}</option>
</select>
OR
<select tabindex="6" class="form-control" id="drpOrderType1" ng-options="style.ID as style.name for style in styles " ng-model="selecedValue" ></select>