Angular JS and getting values from a function - javascript

I have these functions that do calculations of values from input fields using ng-model.
$scope.EmployeeCompetenceObs = function () {
return $scope.user.percentEmployeesCompetentAfterTraining - $scope.user.percentEmployeesCompetentBeforeTraining;
}
and what I am trying to do is get the value from that function and use it in another function:
$scope.EmployeeCompetenceAtt = function () {
return EmployeeCompetenceObs() - $scope.user.adjustmentFactorsEmployeeCompetence;
}
but when I call {{EmployeeCompetenceAtt()}} it comes up ad undefined...what am i doing wrong?

The EmployeeCompetenceObs is a function in the $scope, as you declared it, so you should invoke it by doing:
$scope.EmployeeCompetenceObs()
You omitted that part in your invocation and that is most likely the cause of the error.

Related

Helper Functions not working in Javascript

I want to use 2 helper functions for a function. Output is not showing any error but the output is showing the function syntax instead of return value
function cuboidlwsidesSurfaceArea(length,width,height) {
return 2*length*width
}
function cuboidwhsidesSurfaceArea(length,width,height) {
return cuboidlwsidesSurfaceArea(length,width,height) + 2*width*height
}
function cuboidsurfaceArea(length,width,height) {
return cuboidwhsidesSurfaceArea(length,width,height) +2*length*height
}
document.write = cuboidsurfaceArea(10,5,20)
</script>
document.write = cuboidsurfaceArea(10,5,20)
document.write is a function. Call it as such.
document.write(cuboidsurfaceArea(10,5,20));
If you want the value returned somewhere, assign it to a variable or return it from a function. Append it to a DOM element. You need to be specific about the use case if you want additional help on what to do with it.

html inject call function with parameter

I have a problem where if i want to add a parameter to my click attribute then it calls the function as soon as it renders
here is my test html:
return html`
<button class="menu-btn" #click="${this._OpenSubMenu(1)}>test</button>"
`;
}
And the function:
_OpenSubMenu(test:number) {
console.log("Hello")
}
This output Hello as soon as the page is rendered.
So how can i avoid this while still adding a parameter to my function?
You need to make your function return a function. Your click function will then execute the returned function, and due to closure's will still have access to the params.
eg..
_OpenSubMenu(test:number) {
var that = this;
return function () {
console.log("Hello");
//test is also a closure so you can use here
//that will equal this
}
}
If you want access to this, you could also use an arrow function
_OpenSubMenu(test:number) {
return () => {
console.log("Hello");
//test is also a closure so you can use here
//this will also still be valid here
}
}

Can you use parent function variables inside a returned function in javascript?

Here's the function code:
function TestFunction(number){
return function(e){
return `${number}`;
}
}
When I use it on google's devtools command line it returns:
function(e){
return `${number}`;
}
So it looks like the function returned is not created with the number I give to TestFunction, instead it takes the string just like it was written. I have tried to use concatenation instead of interpolation but still not working. What can I do?
There is indeed a closure around the second function, so it will have memory of what num is.
function a(num) {
return function b() {
return `${num}`;
}
}
const c = a(6);
console.log(c());

Return value from the prototype function in javascript

This is my function, I'm trying to return a value.
var operations = function() {
this.selectedQueryBy = function() {
return jQuery('input[type="radio"][name="selectRadio"]:checked').attr("id")
},
this.submitForm = function() {
jQuery('.btns').hide();
var queryBy = this.selectedQueryBy;
}
}
Im trying to get the value of "selectedqueryby" which is already defined in the function. It returns the whole function instead of the radio button. Is the calling way correct?
Please let me know where Im doing wrong.
I'll call the submitForm event on clicking a button.
You need to add parentheses to call the function:
var queryBy = this.selectedQueryBy();
// ^^
Otherwise you're just referring to the function itself instead of calling it.

angularjs : update value of a variable After external timeout function call

I have a controller and a factory. A function(myfunc) inside the factory(searchFactory) is called by ng-click of a button. after which I call a function(waitfunction) which is outside the conntroller. In that function timeout of 2 sec is used and then a value is changed and returned to the controller. How can I make sure that the value is updated in the controller after 2 sec. JSfiddle : http://jsfiddle.net/zohairzohair4/cRr9K/1334/
var search_name
var angularjsapp = angular.module('graphApp', ['ngAnimate', 'ui.bootstrap']);
angularjsapp.factory('searchFactory', function() {
//return $resource('friends.json');
return{
myfunc:function(search_name){
console.log('ok')
keyword_type = 1
loading_value = waitfunction(search_name)
console.log(loading_value)
return loading_value
}
}
});
angularjsapp.controller('AccordionDemoCtrl', function($scope,searchFactory) {
$scope.count = 0;
$scope.namesPerPage = 10
$scope.currentPage = 1;
$scope.searchFactory = searchFactory.myfunc
});
function waitfunction(search_name){
value = 0
window.setTimeout(function () {
value = 1;
}, 2000);
return value
};
Using the setTimeout function will bypass angular's dirty checking. If you want to use async functionality outside of angulars dirty-checking, you need to trigger angular to do the dirty checking again. You can do that by calling $scope.$apply(); or wrap your async call with a function like this:
$scope.$apply(function() {
...
});
For your specific need - angular already have a number of async methods to replace the default javascript ones and i'd suggest you use that instead of javascripts timeout:
$timeout(function () {
value = 1;
}, 2000);
You can read more about $timeout here: https://docs.angularjs.org/api/ng/service/$timeout
Your waitfunction doesn't seem to be doing what you want it to do. It will return the value long before the timeout changes it. This happens because you're just referencing a simple value. If you pass an object and modify that objects property, then you can achieve what you're trying to do:
function waitfunction(search_name){
var obj = { value: 0 };
$timeout(function () {
obj.value = 1;
}, 2000);
return obj;
};
You then need to bind to the returning objects .value property instead.
I see your plunker and there is a lot of work to be done. It doesn't seem like you're binding the resulting object to anything. I think this post helps to solve atleast the async problem associated with calling setTimeout and the problem of binding to simple values.
You need to use $timeout
$timeout(function() {
value=1;
}, 2000);

Categories