Angular model not updating - javascript

Hi I am trying to update the model based on the value of the radio buttons. I read that it might be something with $parent scope but I am unable to figure it out. I am fairly new to angular and still trying to understand scope. Any help is appreciated.
Code: I am tying the value of the radio buttons to the ng-model="amount" but they wont update at all. Here is my jsbin with my code. http://jsbin.com/zumuc/8/edit Thank you

Here we go: http://jsbin.com/lasesabu/1
http://jsbin.com/lasesabu/1/edit
Just using data.amount in place of amount. The difference is changing object content versus replacing object.

Related

How to get the "input" field value inside a EventListener function from DOM in Angular

Inside my "characters" component I have a form with a textfield, and button. ->
When I click the button it registers, and enters the function but I have no idea how to grab the current input text and use it in the called async function.
HTML:
TS:
Sadly getting the promptText does not work. I have the feeling I am missing a core concept of angular here, but even after extensive search, no luck.
Thanks in advance!
You can use
const promptTxt = document.getElementById('prompt-txtbox') as HTMLInputElement;
console.log(promptTxt.value);
Rather than trying to create form with plain javascipt/jquery, you can use Template form and Reactive form that angular provide to do the same.
A lot of example documentation/video in available for the same.
This seems like something you can also achieve by simple model binding but learning the correct way once will prepare you handle complex forms and build them quickly.

Not able to make two way data binding work on an array

I am trying to create kind of a drag and drop playground using AngularJS.
The code is on plunker. And to understand the question, mostly you'll need to see the plunker.
https://plnkr.co/edit/i82UOOqHRSJyEPN9293E
I am trying to create node like structures here which can be dragged over to the playground on the right side.
On drag, I am adding the node id to the nodeChain variable in $scope.
Now I am iterating the nodeChain array in UI with ng-repeat where I am drawing the node just to check that the nodes added to the chain are reflecting correctly.
However,
I do not see the nodeChain updating from watchCollection logs as well as the nodes drawn on the playground are not updating when new nodes are added.
Can someone please tell me why the binding is not taking effect?
Thanks in advance!
You need to trigger a $digest cycle to update the values. When the $digest cycle starts, it fires each of the watchers. These watchers check if the current value of the scope model is different from last calculated value. If yes, then the corresponding listener function executes. As a result if you have any expressions in the view they will be updated.
if (!Bounds.within(event.pageX, event.pageY, leftPane)) {
scope.$parent.nodeChain.push(NodeChain.getNodeFromId(attr.nid))
scope.$apply();
}
Working Plunker:https://plnkr.co/edit/SNNsVOZps5Fy35dAQIqk?p=preview
You are getting ng-repeat dupes error in your console because there are duplicate values in your array nodeChain.
If i understand your question correctly, you want to add the dropped nodes in the below white space. Please see the plunkr.
You should add $scope.apply() when you change the models outside the scope.

Two way binding for checkbox inside an accordion not workiing

In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon
We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!

KendoUI Switch control with AngularJS

I am trying to use kendo UI's switch control (http://demos.telerik.com/kendo-ui/web/mobile/switch.html) with angularjs. I am having problem that the value is not being bound with model. I am using it like this:
<input type="checkbox" id="locked" kendo-mobile-switch on-label="Yes" off-label="No" ng-model="Model.IsLocked" checked="{{Model.IsLocked}}" data-role="switch">
Basically the variable in model keep the value received from db irrespective of the state on UI.
Second problem I am having is with on and off labels that it keeps on displaying default On and Off.
I opened an issue on the github site and a fix was applied. See this link:
"I pushed a fix, it should work now if you use k-ng-model. The plain ng-model is still broken."
https://github.com/kendo-labs/angular-kendo/issues/333
The second problem (the on/off labels) is because it should be:
k-on-label="'Yes'" k-off-label="'No'"
Note the string literals, otherwise it is interpreted as a variable.

AngularJS - missing ng-model items in $scope object

I'm trying to create a table in which you can edit each row and save your changes. I'm having trouble posting all of the items in the row after pressing save. For some reason, only some of the elements are being sent. Any help or insight would be appreciated.
Here is a plunker of my code
I watched the console in dev tools, and it looks like the $scope.editedEvent object (line 12 in app.js) contains undefined paramaters, except for "name".
As I said in my comment, you can't put ng-model and ng-bind ( or {{}} ) in the same element. Ng-model is for input type fields (input, select, textarea...) and ng-bind for span,div,etc.
So based on what I've understood from your question I've updated the code to make it "angular compliant", when you click the save button it will update the $scope variable editedEvent with the contents of that row and the selected value from the select.
plunkr
Are only name and distance sent? Then look at your convertEvent function ... you are creating a new object with to fields: name and distance.
greetings
Here's a fork with some corrections to achieve what I believe you are looking for:
http://plnkr.co/edit/HTERoyQnP2YQfjnjUVb7
In setting the editedEvent object to use the scope variables you are binding those values to those variables so they stay in sync. Because of this, the editedEvent object is changing out from under you by the time you save (everything is set back to undefined ready for the new "editing" state). Just create a blank editedEvent object and Angular will just fill those out using hg-model instead.

Categories

Resources