Change select input the angular way - javascript

I have a select input with ng-change attribute. In my controller I use the hotkeys module and bind shortcut keys to a function that selects one of the options of the element. The reason I'm not setting the underlying model is that the element has ng-change that I wish to invoke. I tried setting selectedIndex, but that doesn't cause anything to change (not even the result of the underlying model) except the element. Tried to wrap in $apply and got an error. Tried to use $timeout with no delay parameter, and that didn't help either.

Related

React-select get selected option label as strin

When trying to use an icon for an option it seems to be passed as JSX in the onChange handler. Anyway to get hold of original label in option prior to injecting image in the onChange handler? Or is there a way to get hold of index of selected option.
Here's a sample https://codesandbox.io/s/react-select-label-icon-forked-52djv
Using formatOptionWithImage solves the problem.
Example
https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q

ng-disabled overrides custom directive behavior

I'm developing the AngularJS client. I've got a custom directive used as an attribute. The directive checks the access level of the element and sets it to be disabled if the current user is not allowed to use it.
The problem begins when the same element has ng-disabled attribute. In this case the ng-disabled sets the ability of the element, never mind of what I set in my custom directive.
For example I have a button that should be disabled in case the form is invalid. At the same time I'd like to use my custom directive in order to set the button to be disabled if the user doesn't have a permition to use it.
<button ng-disabled="myFrm.myCtrl.$invalid" my-custom-directive="controlName"/>
Inside myCustomDirective I check if the named control is allowed to be activated by the user. If not - I set the disabled attribute to the element. But in case myFrm.myCtrl.$invalid is false ng-disabled removes the disabled attribute and the button is enabled.
Is there any solution to this problem? How can I prevent from ng-disabled to perform its operation?
Does your example directive reflect how you applied your actual directive to the button element? I noticed that your example directive is not following the correct naming convention of making each upper case letter in the directive name a lower case letter with a leading hyphen. i.e. myCustomDirective should be applied to the button like so:
<button ng-disabled="myFrm.myCtrl.$invalid" my-custom-directive="controlName"/>
Otherwise your directive will not be complied or linked for that button.
The only other thing I could think of without seeing the actual code is the priority of the directive. According to the angular docs for the ngDisabled directive:
This directive executes at priority level 100.
By default custom directives have a priority of 0. As long as you have not changed this directive parameter your directive should be compiled after ng-disabled and linked after ng-disabled and therefore have the final say on whether or not the button is disabled or enabled.
-- EDIT --
You should add a watch to myFrm.myCtrl.$invalid as was suggested by another and reapply your directives rules whenever the value changes. You don't need to pass the whole controller into your directive though, you could simply use two way binding on myFrm.myCtrl.$invalid. I am not sure how $watch priority works yet. I am hoping that because your directive will be compiled first it will apply its watch on myFrm.myCtrl.$invalid after ngDisabled does and hopefully that means it will handle value changes of myFrm.myCtrl.$invalid after ngDisable does so that your directive has the final say on what rule is applied.
Finaly I've found a solution to my problem. Instead of watching ng-disabled variable I've totaly diconnected the ng-disabled from its variable. In order to do it I've set the ng-disabled to be allways true in my own directive. My directive is an attribute, so after I've tried some different ways to do it, the solution was to add in my directive constructor the following code:
this.isDisabled = "true";
this.attrs["ngDisabl​ed"] = this.isDisabled;
It's very very important to set the this.isDisabled to "true" as a string and not boolean. Otherwise it doesn't work.

How to get the value to view models when a control's value is changed using jQuery?

I declare a textbox, dropdown list in knockout js. If I dynamically change the value of the textbox or dropdown using jQuery like this...
$('#IdNo').val(_IDNo);//for textbox
$('#IdNo').change();
$('#Subjects option').filter(function () { return $.trim($(this).val()) == parseInt(subjectbind); }).attr('selected', true);//for dropdown
$('#Subjects').change();
...then change() does not bind the value to the knockout. The changed value does appear in the UI but is not reflected in the View Model for further actions.
If you want to make sure Knockout takes note when you manually update the DOM, you need to use the trigger method like so:
$('#Subjects').trigger('change');
The change method can be used to register handlers for the event.
PS. If you're manually updating the DOM, then you should evaluate why / how you're using KnockoutJS...

jQuery .val() doesn´t make a 'change'

I have problems testing my JavaScript. A part of my test looks like
$('#activityType').val("33");
$('#favorite').click();
The $('#activityType') is a select field and I want to select the option with value "33". Now I expected, that this would be a change, so that my function in my program like
$('body').on('change', '.item-select', function() {
var itemRow = $(this).parent().parent();
changeBookableItemInputFields(itemRow);
});
will be executed.
The $('#activityType') has got the class-attribute item-select, so I don´t understand, why $('#activityType').val("33"); is no change. I changed the value and the css-attribute is there. The body should be able to find it and the function should be executed.
Can anybody tell me, why it doesn´t work?
Changing a value with JavaScript does not trigger the events, you need to manually fire it. jQuery makes that easy with .trigger(eventName)
$('#activityType').val("33").trigger("change");
Use trigger() for calling any event using program.
change event is for user types into the input.
You can manually call the any event event using after setting the value:
$('#activityType').trigger("change");

angular.js: select textearea's content upon modification

I want to know if it's possible to select a textarea's content when it gets modified. In jQuery, I'd do the following:
$("texarea").on("change", function (e) {
$(this).select(); // the content gets selected for copy/cut operations
});
I know it's a bad practice to directly manipulate DOM elements from within an angular controller, so if you know how I can do this cleanly, I'd be happy to learn how!
I think you can do the following, attach an event handler to your textfield element using onblur and onfocus attributes. Write two functions for each as follows:
onfocus get the initial content of the textfield
onblur get the final content and compare to the initial content if there is a difference the run the select function
If you want it to be in real time your could also use onkeyup and onkeydown

Categories

Resources