This does seem to me a pretty straight forward question but for some reason I am unable to find a solution after much searching. Pardon me if its a duplicate.
The question is that I would like to pass a 'model' to a function and change its value there.
So in the HTML I have this:
<input type='button' value='click here'
ng-click="CreatePlayer.toggleSidenav(CreatePlayer.someVal)" />
And the function inside the controller is:
CreatePlayer.toggleSidenav = function(target) { }
Now, if I console.log(target)
I do get the current value of this model. But if I set target = 'blah'; It doesn't update the value in the HTML.
Can someone please help me understand what am I doing wrong here?
Thank you.
Update
Thank you all for the time you gave to read the question.
Here is a JS fiddle that I just wrote to explain my problem: https://jsfiddle.net/ibnyusrat/564f7x9p/
The issue is, inside of the controller there is a function and inside of that function I am able to read the value passed as a parameter but I am not able to set it to another value. I don't want to create a new function for every situation. Preferably I would like to use the same function and only pass a different model as a parameter to apply whatever it is that I want to do with its value. Can anyone please help me understand what am I doing wrong?
Thank you all in advance.
In the template pass the name of the scope variable as a string argument:
<div ng-controller="CreatePlayerController as CreatePlayer">
{{CreatePlayer.someVar}}
<input type='button' value='click here'
ng-click='CreatePlayer.updateValueOf("someVar")' />
</div>
In the controller, use property accessor bracket notation to change the value:
this.updateValueOf = function updateValueOf(target){
this[target] = 'Some other value.';
};
The DEMO on jsFiddle
You no need to pass value to function , because your model value change automatically $scope variable updated.
<input type='button' value='click here'ng-click="CreatePlayer.toggleSidenav()" />
In controller set your value;
$scope.CreatePlayer.CreatePlayer ="blash";
Related
Just i want to get the ng-model hidden field value using javascript.
<input type="hidden" name="Latitude" id="sLatitude" ng-model='sLatitude'>
it took me some time to find out, but I think the answer is
angular.element(YOUR_ANGULAR_ELEMENT_HERE).attr('ng-model');
As an answer you 'll get the value of the ng-model, "sLatitude".
I am leaving it here just in case someone else needs it.
you can get sLatitude value by :
console.log($scope.sLatitude);
If you want that value within scope , just access as $scope.sLatitude
If you want that value outside the scope, document.getElementById("sLatitude").value
You can access by calling:
angular.element(document.getElementById('sLatitude')).scope().sLatitude
You can get the value of Latitude by write this in java script in your controller like this.
var latotudeValue = $scope.sLatitude;
You can get the value of Latitude by $scope.
var latitudeValue = $scope.sLatitude;
OR
if you have value attribute in input control then
var latitudeValue = document.getElementsById("sLatitude").value;
I want to access form input value in services.
var emailId = document.getElementById("save_quote_email").value;
console.log("emailId="+emailId);
console.log("emailId2="+angular.element('#save_quote_email').val());
I am able to get value using document.getElementById("save_quote_email").value but not using angular function angular.element('#save_quote_email').val()
It gives error
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.2.16/jqLite/nosel
Please view this plunker http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview for complete code.
in dtoresource.js line numbe2 21.
You can't use angular.element to select by id or some other selector Link provide by you give full info as below
"Note: Keep in mind that this function will not find elements by tag name / CSS selector. For lookups by tag name, try instead angular.element(document).find(...) or $document.find(), or use the standard DOM APIs, e.g. document.querySelectorAll()"
you may use document.query selector as follow
var queryResult = document.querySelector('#save_quote_email');
var emailId2 = angular.element(queryResult);
Here is working plunker http://plnkr.co/edit/mC0JKTZpdnvqyBpihLRW?p=preview
Also this https://stackoverflow.com/a/23626251/5621827 will help you to understand it batter
Instead of trying to answer your question I am going to rather direct you to the correct way of using Angular.
You should never try and select input values, that is what ng-model is for.
ng-model bind the input to a value. As soon as the value changes Angular automatically updates the scope value, no functions of getting data necessary.
I can't make heads or tails out of your plunkr code but you should not do this:
var queryResult = document.querySelector('#save_quote_email');
Also you are trying to access the DOM from a factory, you should rather pass the needed value to an exposed function of the factory and call the function in your controller.
In your controller autoQuoteCtrl you should use a simply scope value for your input like so:
$scope.email = "";
And in your index the input should read:
<input type='text' ng-model="email" />
{{ email }}
Do not use convoluted variables like AutoQuote.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress in your scopes, you should assign the values when they are received from the resource.
$http({url: url}).then(function (rs) {
$scope.email = rs.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress;
}
I have an issue where my $scope.searchVal variable updates, but if I assign it inside an object, it doesn't seem to update at all.
See below:
<div ng-controller="MyCtrl">
<div>{{searchVal}}</div>
<div>{{searchFilter}}</div>
<div>
<input ng-model="searchVal"/>
</div>
</div>
See the JSFiddle
If I type in the input, the first div's value updates properly for searchVal, but the searchFilter object that contains $scope.searchVal as a value is set to the original value of '' and does not update accordingly.
I've considered (and tried) updating the whole object everytime I need it by calling a function, but this seems really hacky to me. Is there a simple way to get this done? Am I missing something?
What you have to is $watch the value from the scope something like:
Online Demo
$scope.$watch('searchVal',function(newVal, oldVal){
$scope.searchFilter.search = newVal;
});
It isn't as straighforward as it seems since angular has no way of knowing whether you want the dynamic binding for the property or not.
You can achieve what you are trying to do using $watch service. Put a watch on the searchVal & use it to detect changes & update the object property accordingly.
Please put $watch . It will always watch the value change of variable
$scope.$watch('searchVal',function(newVal, oldVal){
$scope.searchFilter.search = newVal;
});
updated fiddle http://jsfiddle.net/be6s1eLo/3/
I am trying to give one $scope variable the value of another $scope variable. Can someone tell me what is going wrong? Take a look at the simple plunker for details:
http://plnkr.co/edit/TlKnd2fM5ajrlkKKhKZ1?p=preview
I know I am missing a fundamental concept in the way $scope works, but I can't pinpoint what it is. Somebody slap me and give me that 'Ahaaaa' moment if you don't mind.
The problem is that what you assign to the greeting property does not get reevaluated when username changes. greeting gets stuck with the initial (blank) value of username. You could set up a watch on username and modify greeting when username changes, or you could change the view:
<div ng-controller="Parent">
{{username}} {{greeting}}
<!-- ... -->
</div>
And don't use username when assigning to greeting:
$scope.greeting = 'is so confused.';
Here's an updated example.
There is nothing wrong with what you are doing, but you can't expect greeting to get updated every time username changes since the binding (that creates a $watch) is done in greeting, which is a string. So everytime a $digest loop occurs it will just re evaluate your variable greeting to the same result ("is so confused.").
You need to bind the property you want to maintain updated like this:
plunker
I have a problem going on here and without going into a lot of detail and confusing everyone, let me just ask the simple question.
Here are two functions. I need to use the "id" variable in the SubmitForm() function as well. Can someone please tell me how to do this? This is how new I am to js. :)
Thanks for the help.
AC.chooseFunc = function(id,label)
{
document.qSearch.action = ".index.php?dc=2&id="+ id;
//document.qSearch.action = "index.php?dc=2";
document.qSearch.submit();
}
*** This one fails.
function SubmitForm(id)
{
document.qSearch.action = "index.php?dc=2&id="+ id;
document.qSearch.submit()
}
What I need is the "id" var appended to the query string in the SubmitForm Function. Can someone tell me how to do this please? Thanks for the help!
Can this not be done??
First, as a disclaimer, I think we would all be able to give you better answers if you post an example page demonstrating how the document is put together.
Here's one way you can make it work. At or near the top of your script (or <script> tag) declare a variable:
var storedId;
Then, at the top of AC.chooseFunc, copy the value of id to storedId:
AC.chooseFunc = function(id,label)
{
storedId = id;
...
Finally, remove id from SubmitForm's parameters and use storedId instead:
function SubmitForm()
{
document.qSearch.action = "index.php?dc=2&id="+ storedId;
document.qSearch.submit();
}
i dont know if you would want to do this, but you could make the variable global in other words declare it outside of both functions.
Could you not just use a hidden input and have PHP add it to the query string?
Is id null? Check the value of id...
alert(id);
The second function looks OK to me. The problem could be your passing null into it.
it's pretty clear that the two functions aren't being called in the same way.
As mentioned in another comment, alert the value to see what you're really getting in the function.
The function itself looks fine, so the only conclusion is that they are not working from the same data OR they are called in different ways.
I'd recommend posting a little more of the code in the call tree