Develop Reference

Angularjs ng-value for boolean in select not working

I would like to use ng-value="true" and false (boolean) for a select option. But I want to fill the options in php because I am using laravel and the translator. This is my code, and the value is not boolean after I send the form.
<select
id="job-payed"
required
class="form-control"
name="payed"
ng-model="payed">
<option selected disabled value>Please choose..</option>
<option ng-value="true">Payed</option>
<option ng-value="false">Not payed</option>
</select>

if someone still gets that problem, try this :
<select id="job-payed" required class="form-control" name="payed" ng-model="payed">
<option selected disabled value>Please choose..</option>
<option ng-value="{{ true }}">Payed</option>
<option ng-value="{{ false }}">Not payed</option>
</select>

Try to use ng-value="'true'" because ngValue should contain an expression to the value of
If you use ng-value="true" angular will look for variable called true in your scope($scope.true)
See https://docs.angularjs.org/api/ng/directive/ngValue

This works on select boxes as expected starting in Angular 1.6.0. Prior versions' ng-value treat the values as Strings in select boxes.
Angular 1.5.0: https://plnkr.co/edit/G52M9yaAgJjfVj82i3YF?p=preview
Angular 1.6.0: https://plnkr.co/edit/nyI4ENLW1h0z3JuyDYWO?p=preview
Update the version in the plunk to see how the types change:
<script src="//code.angularjs.org/1.5.0/angular.min.js"></script>

Angular Select Adding undefined option

I have this tempScale object defined in my controller:
$scope.tempScale = {
scaleType : [],
deviations : [],
intervals : 0
};
Which connects to my html:
<select id="scales" ng-model="tempScale.scaleType" class="form-control">
<option value="Manually Calculated" ng-selected="true">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
I added in the ng-selected=true so that manually calculated would be the first and selected option (basically a default option 1), however, when I run the page, my HTML looks like:
<select id="scales" ng-model="tempScale.scaleType" class="form-control ng-valid ng-dirty ng-touched">
<option value="? undefined:undefined ?"></option>
<option value="Manually Calculated" ng-selected="true" selected="selected">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
Why are those ng classes appearing on load, and where is this undefined option value coming from? It's not a loop, so I'm baffled.

You do not need ng-selected. Set the model from the controller as $scope.tempScale.scaleType='Manually Calculated';.
One cannot set a default selected item when using ng-model directive with select element. The select element is bind to model field, which data is undefined. What value select should display? Yes, undefined. You try to pass data via markup, it is not an Angular way.
Just keep your data in JS model, not in HTML markup.[Ref]
Plunker demo

On select of dropdown value, the corresponding appropriate value should be populated in textbox

On select of dropdown value, the corresponding some appropriate value should be displayed in textbox. How to do this in Angular js? Like I have dropdown:
<select class="input-medium" ui-select2 name="affiliate" required ng-model="payout.affiliate.id" required gt-input-msg gt-error-msgs="gtErrorMsgs">
<option></option>
<option ng-repeat="s in affiliateList" value ={{s.id}}>{{s.affiliateName}}</option>
</select>
On select of any value I should be able to display property affiliate.points in some other div or textbox.
Kindly help me.

You could use the ngChange directive on the select element like so:
<select ng-model="selectedAffiliate" ng-change="GetAffiliatePoints(selectedAffiliate)"></select>
When the select value changes the selectedAffiliate property on your scope is updated to hold the selected value. Then you can look up the points for that affiliate and display them somewhere.

Startup value does not set selected value

I've made a simple angular.js example which shows my problem: example
I want to set the start value of the select element to a specific value.
<select name="i" id="i" ng-model="selectedItem">
<option ng-repeat="i in items" value="{{i}}">{{i}}</option>
</select>
The options and the select element get rendered perfectly. But, like in the example, when i set the value in my controller to 6, the selected value on the page is still the first element.
scope.selectedItem = 6;
There are 2 simple buttons which just change the selected value. When you press them the selection change without problems.
EDIT: i updated the jsfiddle and removed unused code and renamed code to make things a bit more clear
EDIT2: I missed to ask if it is possible to fix the second select element too? The different is that this array contains objects instead of numbers.
<select name="o" id="o" ng-model="selectedItem">
<option ng-repeat="o in objects" ng-value="{{o.ID}}">{{o.Text}}</option>
</select>

You should not use ngRepeat to render option elements, it's not supposed to work properly with select and options. Use ngOptions which will work as expected with ngModel:
<select name="i" id="i"
ng-model="selectedItem"
ng-options="i for i in items">
</select>
For the second selectbox which has ngModel bound to ID property of the objects in array, it will be:
<select name="o" id="o"
ng-model="selectedItem"
ng-options="obj.ID as obj.Text for obj in objects">
</select>
Demo: http://jsfiddle.net/d3jf7ueq/9/

AngularJS, select onChange or ngChange

I'm new using angularjs and the angular user interface. I'm interested in the tag.
This is my html:
<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
<option value="">Provinsi</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="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
<option value="">Kabupaten</option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
and this my app.js :
$http.get('json/provinsiData.json').success(function(datax) {
$scope.prov = datax;
});
//part2 data
$http.get('json/acehData.json').success(function(datay) {
$scope.kab = datay;
});
$scope.params = {}
$scope.params2 = {}
As you can see select part2 is disabled.
How can I create an event change that works like the condition below?
if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.

The angular-js select supports the ng-change attribute which may call any javascript method defined in scope.
Example:
However your best bet may be just to evaluate an $scope expression in your ng-disabled= attribute, e.g. ng-disabled="params.id == 'X'".

With Angular, we usually aren't looking for events to trigger changes. Instead, when the model changes, the view should update to reflect those changes.
In this case, the second element should be enabled (not disabled) depending on a value in the model. When the model value connected to the first select menu satisfies some condition, enable the second menu. Yes, technically there's an event, but we don't need to care about it, all that matters are the model's values.
Here's a simplified example of how this might work:
<select ng-model="selection.item">
<option value="">Clothing</option>
<option ng-repeat="item in clothes">{{ item }}</option>
</select>
<select ng-model="selection.size" ng-disabled="!selection.item">
<option value="">Size</option>
<option ng-repeat="size in sizes">{{ size }}</option>
</select>
The second select menu's ng-disabled attribute is a simple expression which basically evaluates to "disable me if selection.item does not have a value". That could just as easily be a more complex expression or a function.
Here's a plunkr based on the code above