Angular - my ngIf hides an input-label only once - javascript

*ngIf="currentIdea.oetSupportNeeded" I have a dropdown list with 2 values - yes and no, and another input label where you can write freely. I want to show the input-label only when user chose "yes" in the dropdown list and to hide it when "no" is chosen.
My problem is that the following code works only once - when page loads and "no" is chosen, the input label is hidden, but when you choose "yes" and then "no" again, the label shows up and doesn't disappear anymore. I want it to toggle on/off depending on the user's choice
I tried using ngShow, ngHide, [disabled], etc. Nothing helped
<div class="select-wrapper" [ngClass]="{'select-wrapper-blocked': isNotAdmin()}">
<select class="input-control" [(ngModel)]="booleanVariable">
<option value="false">No</option>
<option value="true">Yes</option>
</select>
</div>
</div>
<div class="col form-input" [ngClass]="{'form-input-blocked': isNotAdmin()}">
<p class="input-label">
Some text
</p>
<input *ngIf="booleanVariable" class="input-control" [(ngModel)]="stringVariable" />
</div>

According to the code you shared, the value of your select menu is bound to the booleanVariable property of your component.
Your *ngIf queries another property, so the condition is wrong. You should be checking the booleanVariable in the condition.

Something similar happened to me few hours ago. The problem was that
<option value="false">No</option>
<option value="true">Yes</option>
was wrong. I solved it with
<option [value]="false">No</option>
<option [value]="true">Yes</option>
That's because otherwise Angular does not "analyze" the value of the option but recognizes it as a string.

Use ngModelChange event and make a function to typecast the data.
Check the link for example. Show Hide Field using *ngIf

You are using true and false as strings. You can change the test into your ngIf.
Like
<select [(ngModel)]="foo">
<option [ngValue]="true">true</option>
<option [ngValue]="false">false</option>
</select>
<input *ngIf="foo == true"/>
And to define a default value, you can set the value of foo into the class like
public foo = true;

Related

click specific option using javascript or jquery

I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you

How to display a preselected value in a dropdown without 'onchange'

Currently I have a dropdown in my edit.blade.php
<div class="md-form">
<select id="estado_civil" name="estado_civil" class="mdb-select validate" onchange="editar('estado_civil',$(this).val());">
<option value=""></option>
<option value="1">Soltero(a)</option>
<option value="2">Unido(a)</option>
<option value="3">Casado(a)</option>
</select>
</div>
I needed the dropdown to select/display the value the user had previously chosen and stored in the database. I achieved this using JQuery:
$(document).ready(function() {
var e = $.Event('change');
$('#estado_civil').val('{{$personas->estado_civil}}').focus().trigger(e);
However, this function registers the display of the pre-selected value as a 'change' upon page load. Therefore, it triggers another function I made that notifies the user the value has changed.
Question: Is there a way to select/display the preselected value from the database, without registering it as a change?
Thank you so much!
I'm not super familiar with Laravel but from a quick read of the docs you'd do something like this in the blade:
<option value="1" {{estado_civil) == 1 ? "selected" : ""}}>Soltero(a)</option>
<option value="2" {{estado_civil) == 2 ? "selected" : ""}}>Unido(a)</option>
This uses a ternary to set the selected value of the input.

jquery not changing value of text input

I'm trying to create a "How did you find us form element" and I'm having some jQuery trouble. The user selects from a list of options, one of which is "other". When selected other a text box that allows them to be more specific. In an effort to make this more user friendly that input is hidden when another option is displayed. I've got the jQuery working to show and hide the text input as the user changes the option but I would like it to clear any text in the text box in the event the user selects other, fills something in, then selects another option.
<label for="pcFindUs">How did you hear about us?</label>
<select name="pcFindUs" id="pcFindUs" onChange="getval();">
<option value="No Answer">Select One</option>
<option value="Internet Search">Internet search</option>
<option value="Internet Advertisement">Internet ad</option>
<option value="Soclail Media">Social media </option>
<option value="Unknown">I don't remember</option>
<option value="other">Other</option>
</select><br/>
<div id="pcHiddenOtherSpecify" style="display:none;">
<label for="pcFindUsSpecify">(Please Specify): </label><input type="text" value="" id="pcFindUsSpecify" name="pcFindUsSpecify" maxlength="50">
</div>
<script>
function getval(){
var values = $('#pcFindUs :selected').val();
if (values == "other"){
$("#pcHiddenOtherSpecify").css("display","block");
}else{
$("#pcHiddenOtherSpecify").attr("value","");
$("#pcHiddenOtherSpecify").css("display","none");
}
}
</script>
The pcHiddenOtherSpecify div containing the additional input appears and disappears just fine, but the value of #pcHiddenOtherSpecify still has whatever the user entered.
I've also tried
$("#pcHiddenOtherSpecify").val("");
With no luck. Any ideas what I may be doing wrong here?
You are trying to change the value of a div element, not an input. Try this:
$("#pcFindUsSpecify").val("");
Wrong ID
$("#pcFindUsSpecify").val("");
try
$("#pcFindUsSpecify").val("");
check it out
http://codepen.io/JcBurleson/pen/MKBBWq

Disable selectbox with ng-options in angularjs

Hello how can I disable a select box, so that a user can only see the actual value of the select box and can't change the content inside. It's for an ionic framework mobile application.
My select box is looking like this one here:
<select ng-class="nightMode"
ng-options="option as option.label for option in item.Options track by option.id"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
</select>
I tried with ng-disabled, disable inside the ng-options, ng-readonly but none of these worked for me. So what is the correct way to achieve this?
ng-disable example:
<select ng-class="nightMode"
ng-options="option as option.label for option in item.Options track by option.id"
ng-disabled="true"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
</select>
Update:
I tried one of the workarounds like suggested:
<select ng-class="nightMode"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
<option ng-repeat="option in item.Options" value="option.id" ng-disabled="true" ng-selected="item.Checked.id==option.id">{{option.label}}</option>
</select>
But I can switch to a empty entry inside the select box and set the value of the selectbox to undefined.
Your code snippet not clear yet. But i can disable this select using disabled="true" .
Check out my working
http://plnkr.co/edit/xDefIzZ3YleYcyAmQYHj?p=preview
Here are better code snippet editor :
http://plnkr.co/
http://jsfiddle.net/
I guess your logic is wrong,
If you don't want to change content in selectbox, then it's not going to be a select element, just use an input and assign a model to it, then something changed, change the value of it.
<input type="text" name="selectedId" ng-model="selectedId" />
Other Implementation:
If you want to open select and don't able to select them,
then add your dynamic data to
var datas = [
{
"value" : "foo",
"id" : "0111",
"selectable": false
},
{
"value" : "foo",
"id" : "0111",
"selectable": true
}
];
Then use it on option element;
<option ng-repeat="option in item.Options" value="option.id" ng-disabled="true" ng-disabled="item.selectable">{{option.label}}</option>
Well it turned out that this was a ionic-framework item-select problem.
I found this issue to solve my problem:
https://github.com/driftyco/ionic/issues/1549
Like suggested there I end up adding a class to my select box which looks like this:
.style-disabled {
pointer-events: none;
}
And my select box is now looking like this:
<select class="style-disabled"
ng-class="nightMode"
ng-disabled="someCondition"
ng-options="option as option.label for option in item.Options track by option.id"
ng-change="item.Call(item.SettingKey,item.Checked.id)"
ng-model="item.Checked">
</select>
You can't do it the way you want, but there are some work around in previously asked question, check them 1 , 2
<div ng-app="myapp">
<form ng-controller="ctrl">
<select id="t1" ng-model="curval">
<option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
</select>
<button ng-click="disabled[curval]=true">disable</button>
</form>
angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.options=['test1','test2','test3','test4','test5'];
$scope.disabled={};
})
I hope that helps, good luck

jQuery show/hide multiple 'Other' input fields based on select drop down

I am using the follwoing jQuery to show/hide an 'Other' title field on page:
$('label[for=customerTitleOther], #customerTitleOther').hide();
$('.jTitle').change(function() {
if($(this).val() != 'Other') {
$('label[for=customerTitleOther], .jOther').hide();
}
else {
$('label[for=customerTitleOther], .jOther').show();
}
});
The field & associated label are hidden by default. However, the application i am building has scope for multiple entries on the same page so there may be multiple other fields like. Any ideas on how to extend the jQuery to cope with any number of 'Other' fields on page?
Well, it's not trivial, but what I've implemented is a "toggleOnSwitch" mechanism. Fragments of the page are annotated with the class name "toggleOnSwitch" and another class that tells what <option>, checkbox, or radio button determines visibility. The event handlers attached to the "toggler" elements (that is, the <options> or input fields) add or remove a particular class from the "toggled" elements, and (when switched "off" make sure that input fields are marked as "disabled" and a couple of other book-keeping tasks like that.
One trick is that when the "toggler" element is something like an <option> or a radio button input, when one element is toggled "off" the code has to check to see whether another element is toggled "on". That's because there's no event logged when one radio button loses the "checked" setting because another one has been clicked.
I've been thinking about posting my code for this, but it'd have to be cleaned up a little and stripped of one or two specialized hacks for my own application. Also, I'd want to make it use John Resig's "metadata" plugin instead of the cheesy version I did myself (before I knew "metadata.js" is available).
To answer my own question:
$(".jTitle").change(function(){
//set the select value
var val = $(this).val();
if(val != "Other") {
$(this).nextAll('.jOther').hide();
} else {
$(this).nextAll('.jOther').show();
}
})
With the HTML being:
<td>
<select id="titleDepend1" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="otherDepend1" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
</td>
So all the following elements with class jOther will be shown onChange.

Categories

Resources