angular js, how to enabled when selected change - javascript

i have problem using angularjs, because i new.
this is my html code :
<select id="provinsiSelect" ui-select2 ng-model="params.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="kabupatenSelect" disabled ui-select2 ng-model="params2.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
as you can see that, there are two select, please help me when first select change, then second select enable from disable.

Simply use ng-disabled:
<select id="provinsiSelect" ui-select2 ng-model="params.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="kabupatenSelect" ng-disabled="params.id" ui-select2 ng-model="params2.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
Assuming you don't have an id of 0, params.id should be truthy once an id has been selected.

With ng-disabled as the previous comment said. You should also add a watch on the first select variable, and just set the params.id to the value you need on change.
$scope.$watch('provinsiSelect', function (newVal) {
$scope.params.id = true;
});

Related

Dynamic drop down list content/behavior using JQuery

I have a use case in our UI, where I need to perform some hacky JQuery operations to dynamically populate a drop down box. Here is the scenario:
I have the following two select boxes and their options:
<span class="select levelSelect expandable-list replacement select-styled-list tracked focus select-clone tracking open" tabindex="-1" style="width: 157px; position: absolute; top: 566.733px; left: 338px;">
<select id="select1" name="select1" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<span class="select-value">Select one...</span>
</span>
<span class="select levelSelect expandable-list replacement select-styled-list" tabindex="0">
<select id="select2" name="select2" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="optionA">option A</option>
<option value="optionB">option B</option>
</select>
<span class="select-value">Select one...</span>
</span>
Any change/selection for select1, invokes a change handler function, which needs to perform the following actions for select2:
If select1 == option1, Add an option for "N/A" (don't want this option to be seen), set "N/A" as the value
Otherwise, take out "N/A" if option 1 was previously selected, select ""
You should be able to repeatedly change select1 and get the same behavior
This is what I have tried:
if (select1 == "option1") {
// Add and select N/A
$("#select2").append('<option value="N/A">N/A</option>')
$("#select2").val('N/A');
}
else {
// Remove N/A option and select nothing
$("#select2").val('');
$("#select2" + " option[value='N/A']").remove();
}
Regardless of what is selected on select1, the selection/options for select2 do not change. Any help/pointers would be greatly appreciated.
This is what I was missing after each select box action:
.trigger('update-select-list').trigger('change');

selectize js search not working

Search option is not working with single select although It is working with multi select.
Below is the code:
html:
<select id="select-name" placeholder="Select a person..." >
<option value="4">Thomas Edison</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
js:
$(function() {
$('#select-name').selectize();
});
This is not documented, I believe, and I find it the hard way by comparing the provided samples. You have to add an option with the value of "" to get that result.
<select id="select-name" placeholder="Select a person..." >
<option value="">Select a Person</option>
<option value="1">Person 1</option>
<option value="2">Person 2</option>
</select>

Drop down list show all elements but disabled for selection

I have JSP page and drop down list programatically populated.
Now, under some circumstances that dropdown should be disabled, but user should be still able to see all of it's element, but can't actually select it, something like this: https://jsfiddle.net/nenadbulatovic/6g4pmmpv/1/
<select>
<option value="Select...">Select...</option>
<option disabled value="volvo">Volvo</option>
<option disabled value="saab">Saab</option>
<option disabled value="mercedes">Mercedes</option>
<option disabled value="audi">Audi</option>
</select>
Obviously as there is condition I can't just put disable next option.
This is actual part of code (drop down) where I need that.
<div class="row-fluid">
<div class="span3">
<label><%=Constants.REQUIRED%> <c:out value="${requestScope.RESOURCES_MAP.SITE_PARENT}"/>:</label>
<select class="selectpicker" data-width="100px" id="siteParentNameSelect" style="width:250px;margin-bottom:0px;">
<option value=''>${requestScope.RESOURCES_MAP[SELECT]}</option>
<c:forEach var="siteParentName" items="${siteParentNameList}">
<option value="${(pageContext.request, siteParentName.id)}" ${siteParentName.id == '0' ? 'selected = "selected" ' : ''}> ${siteParentName.name}</option>
</c:forEach>
</select>
</div>
</div>
I should check if some condition like "enabledFlag" and then if it is true/false enable/disable its elements for selection.
EDIT: I can use only JSP/JSTL, JavaScript, JQuery
You should use Angular ng-disabled directive:
<select>
<option value="Select...">Select...</option>
<option ng-disabled=flag value="volvo">Volvo</option>
<option ng-disabled=flag value="saab">Saab</option>
<option ng-disabled=flag value="mercedes">Mercedes</option>
<option ng-disabled=flag value="audi">Audi</option>
</select>
For more info: https://www.w3schools.com/angular/ng_ng-disabled.asp
EDIT:
Unfortunatelly, I am not quite familiar with JSTL, but can't you do something like this?
<option value="mercedes" <c:if test="${flag}"><c:out value="disabled='disabled'"/></c:if>">

How to set default option in select with Angular?

I'm trying to set the "Seleccionar tamaño" option as default but I cant..
<select name="tamano" ng-model="pizza.initial_prize" class="form-control select">
<option ng-value="0">Seleccionar tamaño</option>
<option ng-value="pizza.fam">Familiar</option>
<option ng-value="pizza.med">Mediana</option>
<option ng-value="pizza.peq">Pequeña</option>
</select>
Can someone explain me how?
Thank you.
assign 0 in pizza.initial_prize
Controller
$scope.pizza.initial_prize=0;
in your <!-- app.js -->
$scope.pizza.initial_prize = 0;
You can also use ng-init :
<select name="tamano" ng-model="pizza.initial_prize" ng-init="pizza.initial_prize= options[0]" class="form-control">
<option ng-value="0">Seleccionar tamaño</option>
<option ng-value="pizza.fam">Familiar</option>
<option ng-value="pizza.med">Mediana</option>
<option ng-value="pizza.peq">Pequeña</option>
</select>
Use selected as follows:
<option ng-value="0" selected>Seleccionar tamaño</option>

Dynamic select options in ng-repeat

I would like to have a dynamic select option values bind to select dropdown.
<div ng-repeat="condition in conditions">
<div class="form-group">
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="{{age.Description}}" ng-repeat="age in ageConditions">{{age.Description}}</option>
</select>
</div>
</div>
I like
age in ageConditions
to be dynamic. I also tried ng-options="dynamicOptions" but it always bind to the same list.
I want to achieve this with ng-repeat.
Repeat 1:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="ageCondition1">ageCondition1</option>
<option ng-value="ageCondition2">ageCondition2</option>
</select>
Repeat 2:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="yearsCondition1">yearsCondition1</option>
<option ng-value="yearsCondition2">yearsCondition2</option>
</select>
As shown i want the option in select to be dynamic in ng-repeat.
Any idea?
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option value="getValue(age, $parent.$index)" ng-repeat="age in ageConditions"> getText(age, $parent.index)</option>
</select>
Please note that $parent.$index is used.
the dynamic nature van be achieved used functions which return the value based in $index.
$scope.getValue = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
$scope.getText = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
hope this helps
Solved this by creating a directive that created a new scope for select.

Categories