I would like to know how can I do autosave in a Kendo numeric textbox.
I create a little demo, I can do an autosave with normal input text, (autosave when lost focus or 2 sec without entering values), then I add a Kendo UI numeric textbox, works also when I enter some value or lost focus, but, when I change the value in the scrollbars , autosave don´t work.
http://plnkr.co/eD6XGqMkOp7AA1nPAXNu
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box ng-model="item.value" style="width: 100%;" required/>
</p>
What is missing?
Thank you.
Best regards.
jolynice
Kendo's NumericTextBox does not update the model on the Spin event (the event you are referring to, which fires when you press the up/down arrows).
I encountered the same, annoyed that ng-model was only updated on Blur. My fix was to trigger the Change event on Spin >> Updated Plunker
<input
kendo-numeric-text-box="myNumeric"
k-on-spin="myNumeric.trigger('change')"
ng-model="item.value" />
The Kendo docs offer a slightly different approach.
Related
I have many buttons on my page but none are inside a form. I already assigned one button and changed its color so it shows as a bootstrap primary button.
How can I make it so that when a user is on the page and they click enter then the button click event for that button is called?
I am not sure about what you are asking; but you can do the following, if you have a controller with the function add() attached to the scope:
<form ng-submit="add()">
<input type="text" ng-model="myModel">
<input type="submit" value="Add"/>
</form>
The above adds the value entered in the input to the model.
I suggest using a <form ...> around your elements. Because if you rely on a custom keypress detector, and you have more than one button, it will activate all of them. The <form ...> dictates which button is to be submitted when a user is in a particular input field and hits Enter.
Your form doesn't even need to have an action="..." or method="...". You could just as well use ng-submit="yourFormParser()".
ng-submit will not useful to you, because your form submit event is different.
The only option remains is, you can take use of ng-enter directive, but you should manually bind it wherever you want. I believe this is last option.
ng-enter="myEvent()"
HTML
<input type="text/url/email/number/checkbox/radio" ng-model="test" ng-enter="myEvent()"/>
Hope this could help you, Thanks.
As a code is better than 1000 words, I've created a plunker in order to show my problem:
http://bit.ly/1uiR2wy
Given the specific DOM element, thing is that I have an input checkbox with an ng-change, I want to add an ng-click to the li that wraps it in order to be able to click in the whole area.
This new ng-click makes the method in the ng-change to happens twice. And is even worse for an SPAN DESCRIPTION 2 that is happening 3 times.
<li class="odd" ng-click="changeToggleModel($event)">
<span class="overcomeDescription ellipsis-overflow">span description</span>
<label>
<span>SPAN DESCRIPTION 2</span>
<input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
</label>
</li>
I've tried with stopPropagation and it seems that it doesn't solve the issue.
Any ideas about it?
If you check the plunker and open the console you'll see the issue perfectly.
Thanks in advance to everyone
You need to stop event propagation on label level. Try this:
<label ng-click="$event.stopPropagation()" ...>
Demo: http://plnkr.co/edit/AjD9GlA3zjxABix6hegg?p=preview
The reason why it happens is that the label (connected to corresponding checkbox) sort of generates one more click event in order to pass click to the input. This click event causes described strange issues, because it still bubbles like normal event (well it is normal event), and hence is detected by ngClick directives.
Late to the party but encountered the same issue- it seems like AngularJS propagates the click event separately and explicitly. Instead of stopping propagation on the label, you can catch it on the input explicitly:
<input
type="checkbox"
ng-click="$event.stopPropagation()"
ng-change="toggleSelection($event)"
ng-model="isSelected"
>
I'm working on system where I have an ng-repeat populating from an array of elements, with a radio buttons setting a property. When it loads in, none of the radio buttons are selected, but when I select any of the radio buttons, it binds to the model appropriately. It works in a single format without the outer ng-repeat, so I'm not sure why it refuses to select the radio button from the model.
<div ng-repeat="selectedTag in selectedGroup.tags track by $index" ng-controller="ThemesEdit_TagStylesCtrl">
<div class="type-select">
<label ng-repeat="styleGroup in styleGroups.list" ng-hide="styleGroup.name == 'Settings'">
<input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>
</label>
</div>
<div ng-include src="another_page"></div>
<div class="clear-float"></div>
<p tag-example="selectedTag" data-style-group="styleGroup"></p>
</div>
I can see that the $parent.selectedTag.styleGroupId comes through on each selectedTag, and it triggers the options in the template that is brought in with ng-include, so I know that is pretty close to working properly. The only remaining issue seems to be that it doesn't automatically select a radio button with a defined ng-model.
I'm fairly new to angular, so it could be something completely obvious, but I was hoping someone could light my way. Thank you for any and all help!
Edit: Updated with two suggestions below. Still no joy, but thought I'd edit the code to the most current iteration.
I would say the solution is ng-value="styleGroup.styleGroupId", documentation here.
I feel pretty dumb - it was something simple that I overlooked. With a single instance, publishing with the name set in <input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>" worked fine. Once I stuffed it in an ng-repeat, it was publishing under the same name="tagType" and overwriting the selection. Sure enough, when I scrolled to the bottom of my page, the last set of radio buttons were checked appropriately.
Checking the docs, the name is optional, and removing it allowed all the radio button sets to populate properly. I haven't seen any ill effects on anything else - is there anything I should be watching for?
Thanks for the help/thoughts, everyone!
I think you should use ng-model="selectedTag.styleGroupId". selectedTag shouldn't be overwritten by your inner ng-repeat.
UPDATE:
Have a look at this SO answer ng-value needs to be set true.
I have an issue with the AngularStrap datepicker (bs-datepicker directive)..
When a date is selected using the popup datepicker - no problem.
When a date is typed (keyboard) and if the input dateformat is different from the config, the model doesn't get updated. I am not sure if this is how its supposed to work but I am sure the users wont mind just typing in the date instead of using the mouse clicks to select a date.
here is my html
<div class="control-group input-append">
<input type="text" ng-model="datepicker.date" data-date-format="dd/mm/yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
User types in 01/01/1998 - no problem.
User types in 01-01-1998 - doesnt work, the model doesnt get updated.
Here is the plunker
Any help is appreciated. The work around I could think of is to make the the input readonly but thats a bad idea.
Thanks in advance.
I noticed that on certain websites, if you want to tick a checkbox on or off, you just need to click the corresponding text. When I put a checkbox with some descriptive text on my page, I have to actually hit the checkbox for it to get ticked. How is the former effect achieved?
Consider using a <label> as in this example:
<input type="checkbox" name="call" id="willcall">
<label for="willcall">click on this text to select the checkbox</label>
This example from: http://www.askdavetaylor.com/make_text_adjacent_to_checkbox_clickable.html
I'm sure that they use a JS script to achieve this. It's most likely a label that is being clicked, and they might add an onclick() event to the label which uses the javascript to find the checkbox and add the CHECKED attribute to it. Sorry for not supplying code, but I hope that gives you some understanding on what those websites do.