We Keep Coding

Angular 2 Two way binding with [disabled]

I have an input with [disabled] depending upon the ngModel of another input. Initially [disabled] is working properly but not when we change the dependant input value, the [disabled] property is not working. How to apply two binding on [disabled] property?
Following is the code snippet.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabled</option>
</select>
This model isDisabled is changed correctly. I could see the value change like this in template {{isDisabled}}. But not reflected in the [disabled] property of the select box.
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>

The primary problem was you were using same value 0 for both option. But even if you change them to 1 & 0 respectively for Enable & Disable. It will not gonna work because value attribute stores values as '0'(string '0') & '1'(string 1) (in short stringify value of it).
You could easily solve this dataType issue of value by using ngValue attribute binding.
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option [ngValue]="1">Disabled</option>
<option [ngValue]="0">Enabled</option>
</select>
Plunker Demo

you need to add a name attribute to the input and make the ng-mode two-way binding by wrapping up with parenthesis also. no need to use the ngModelChange for this purpose
<select [(ngModel)]="isDisabled" name='isDisabled'>
<option value="0">Disabled</option>
<option value="1">Enabled</option>
</select>
<select [(ngModel)]="userInput" [disabled]="isDisabled == '0'" name='userInput'>
<option value="test">Test</option>
</select>

In your question, both option values are 0.
You'll want to ensure that one is true, with the other being false
Component:
component class {
myVar = false
}
Template:
<select [(ngModel)]="myVar">
<option value="true">...</option
<option value="false">...</option
</select>
<select [disabled]="myVar">
<option>...</option
</select>

Try to use true\false for [disabled] it will save your function comparator, and use 2-way binding directly.
Like:
<select [(ngModel)]="isDisabled">
<option value="true">Disabled</option>
<option value="false">Enabled</option>
</select>
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
See Plunker

jQuery Select2 placeholder doesn't work when defined inline?

I have the following multiple drop-down lists defined using select2 but the placeholders don't work?
<select class="js-select2" multiple="multiple" placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
<script>
$(".js-select2").select2({
// placeholder: 'Select an option...'
});
</script>
It only works if I define the placeholder inside the select2 option list (commented out above) but I want to use a single class to initialize all select2 multiselects drop-downs and display different placeholders.
Is it possible to achieve this?

For a quick workaround, you can pass the value of the attribute to the placeholder option:
$(".js-select2").each(function() {
$(this).select2({
placeholder: $(this).attr('placeholder')
});
});
This does not work when using $(".js-select2").select2() directly, I assume in that context this doesn’t point to the right object (or something like that). But if you use an each loop to initialize it on each element separately, it works.
https://jsfiddle.net/84whaced/
Alternatively, it should work if you use data-placeholder in the HTML (amazing what we can find out once we check the documentation, right?), see https://select2.github.io/options.html#data-attributes - https://jsfiddle.net/84whaced/1/
This would be the preferred option, I think.

It will work as:
If we just set the attr e.g. $("#state").attr('data-placeholder', 'Select State'), there will no effect.
However, if we set the attr and then call $("#state").select2() with no arguments, then the placeholder updates.
$("#state").attr("data-placeholder","Select State");
$("#state").select2();

You can use the data-placeholder for different placeholder for every select
$('select').select2({
placeholder: function(){
$(this).data('placeholder');
}
});
<select class="js-select2" multiple="multiple" data-placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" data-placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
You can check the Demo as well.

Maybe you have similar ids on your page. JS'll select latest id by default. Try to change them.

Angular 2 - Bind array of numbers to select options

I have seen a lot of examples to bind array of Objects.
But, all I have is this
years = [1900,1901,1902];
and i want to bind this to the options for my select control.
I have this template:
<select id="carYear" required>
<option value="">Select year</option>
<option ngFor="year in years">{{year}}</option>
</select>
But, it does not work.
I also tried ng-repeat. Any ideas what is wrong here?

Fiddle here:
https://jsfiddle.net/frishi/bzbbo5da/
Basically, you can use a flat array and enumerate it using a <select>
The only additional thing you need to do is
<select ng-model="myYears" ng-options="o as o for o in years"></select>
When you use a flat array, you have to tell angular what to use as the key. Angular will do it for you if you use an array of objects.

You're missing an asterisk on the ngFor directive and the let keyword.
Try:
<select id="carYear" required>
<option value="">Select year</option>
<option *ngFor="let year in years">{{year}}</option>
</select>

Angularjs not visualizing first option in input select

In Angularjs, binding input select to the model creates new empty option
<option value="? undefined:undefined ?"></option>
And this is the code
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Is this normal? It doesn't seem to be something good looking.

Make sure you have initialized your model variable with one of the option value.
Try this
Controller
$scope.hotspot = {};
$scope.hotspot.category = "Culture";
HTML
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>

How to get the innerHTML through val()

<td class="value" style="width:40%;">
<select>
<option value="1">one</option>
<option value="1">two</option>
<option value="1">three</option>
</select>
</td>
I am finding the val() by using below code:
$(this).closest("td").next().find("select").each(function(){
selectValues.push($(this).val());
});
Please refer this JSFiddle. I want to get the innerHTML of the Option using val().
Like: $(this).val().innerHTML
Please suggest any way.

You need the text of the selected option so
selectValues.push($(this).find('option:selected').text());
Demo: Fiddle

Try like this:
$('td select option [value=1]').text();

For getting selected option inner text use this
selectValues.push($(this).find('option:selected').html());
or
selectValues.push($(this).find('option:selected').text());
For getting selected option value
selectValues.push($(this).val()); // It return value of the option

Your code is work perfect only problem is HTML Code you are set all <option> element value="1" that's why this problem occur now you can check following jsFiddle
Check Demo jsFiddle
Update HTML
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hope this help you!

Get it with .text()
selectValues.push($(':selected',this).text());
Check your fiddle
Even you can use .map() method to create arrays:
var selectValues = $(this).closest("td").next().find("select").map(function(){
return $(':selected',this).text();
});

use text()
$(this).closest("td").next().find("select").each(function(){
selectValues.push($(this).text());
});