We Keep Coding

How to set value in multiple select option in FORM in AngularJS?

Hmtl:
<div class="form-group">
<label for="loaisanpham">Loại Sản Phẩm</label>
<select class="form-control" name="idLoaisp" id="idLoaisp" ng-model="idLoaisp" ng-required=true>
<option ng-repeat="loaisanpham in loaisanphams | orderBy: 'tenLoaisp'" value="{{loaisanpham.idLoaisp}}">{{loaisanpham.tenLoaisp}}</option>
</select><br>
</div>
<div class="form-group">
<label for="phuong">Phường</label>
<select class="form-control" name="idVungxa" id="idVungxa" ng-model="idVungxa" ng-required=true>
<option ng-repeat="vungxa in vungxas | orderBy: 'tenVungxa'" value="{{vungxa.idVungxa}}">{{vungxa.tenVungxa}}</option>
</select><br>
</div>
JavaScript:
document.getElementById("idLoaisp").value = track.loaisanpham.idLoaisp;
document.getElementsById("idVungxa").value = track.vungxa.idVungxa;
Just idLoaisp show value in html and idVungxa not show.
I do not understand why it is not displayed. Help me. Tks all

Assign your value to the $scope in your controller.
$scope.idVungxa = track.loaisanpham.idLoaisp;

In plain HTML5 you would set the option as "selected":
like this:
<select multiple>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c" selected>c</option>
</select>
There might be a different way to do it in Angular, but if this helps, you can use
<option [attr.selected]="boolean" ...

Remove the attribute "value" in the html options and set the value to the model, you have ng-model="idLoaisp" and ng-model="idVungxa" in the view so I guess in your controller you have that variables to store the values of the item selected, models are double binding that means you can also set the value to that model.
$ctrl.idLoaisp = track.loaisanpham.idLoaisp
$ctrl.idVungxa = track.vungxa.idVungxa

How to Cascade the country list passed through angular controller to view part

[
{"name":"Afghanistan"},
{"name":"Albania"},
{"name":"Algeria"},
{"name":"American Samoa"},
{"name":"Andorra"},
{"name":"Angola"},
{"name":"Anguilla"},
{"name":"Antarctica"},
{"name":"Antigua And Barbuda"},
{"name":"Argentina"},
{"name":"Armenia"},
{"name":"Aruba"},
{"name":"Australia"},
{"name":"Austria"},
{"name":"Azerbaijan"},
{"name":"Bahamas The"}
]
<select id="country" ng-model="formOneData.country" ng-options="country in country">
<option value="" disabled>--Select your Country--</option>
</select>
{{country.countries}}
While displaying the countries in html is get the below JSON content of countries, i need to list it in the select field. So is there any alternatives .

Is this what you are trying to achieve?
function TodoCtrl($scope) {
$scope.choice = null;
$scope.countries = [
{"name":"Afghanistan"},
{"name":"Albania"},
{"name":"Algeria"},
{"name":"American Samoa"},
{"name":"Andorra"},
{"name":"Angola"},
{"name":"Anguilla"},
{"name":"Antarctica"},
{"name":"Antigua And Barbuda"},
{"name":"Argentina"},
{"name":"Armenia"},
{"name":"Aruba"},
{"name":"Australia"},
{"name":"Austria"},
{"name":"Azerbaijan"},
{"name":"Bahamas The"}
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<select id="country" ng-model="choice" ng-options="country.name as country.name for country in countries">
<option value="" disabled>--Select your Country--</option>
</select>
{{choice}}
</div>
</div>

$scope is the 'glue' between controller and view.
$scope.countries = [
{"name":"Afghanistan"},
{"name":"Albania"},
{"name":"Algeria"},
{"name":"American Samoa"},
{"name":"Andorra"},
{"name":"Angola"},
{"name":"Anguilla"},
{"name":"Antarctica"},
{"name":"Antigua And Barbuda"},
{"name":"Argentina"},
{"name":"Armenia"},
{"name":"Aruba"},
{"name":"Australia"},
{"name":"Austria"},
{"name":"Azerbaijan"},
{"name":"Bahamas The"}
]
And HTML
<select id="country" ng-model="formOneData.country" ng-options="country in countries"></select>

How to get values of dropdown

Here is my HTML
<select class="height_selected">
<option>Select Height</option>
<option ng-model="userHeight" ng-init="1" value="1">123 cm</option>
<option ng-model="userHeight" ng-init="2" value="2">125 cm</option>
<option ng-model="userHeight" ng-init="3" value="3">124 cm</option>
</select>
<a type="button" ng-click="updateHeight()">Save</a></div>
In the controller i do
userHeight = $scope.userHeight;
But i am not getting any value.
How can i get the value ?

You wrongly used ng-model for options. It is used for only inputs fields like input box, textarea, select
For More Reference
it comes like
<select class="height_selected" ng-model="userHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
<option value="3">124 cm</option>
</select>
Now only you get the value

put ng-model in select.
also if you want to select 1 item default than
$scope.userHeight = "/value of option/";

Here you are:
var app = angular.module('app', []);
app.controller('controller', ['$scope', controllerFunction]);
function controllerFunction($scope) {
$scope.companies = [{
'id': 1,
'name': "c1"
}, {
'id': 2,
'name': "c2"
}];
$scope.companyChange = function() {
alert(angular.toJson($scope.company));
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<select ng-model="company" ng-options="c.name for c in companies track by c.id" ng-change="companyChange()">
<option value="">All</option>
</select>
</div>
Refer more: https://docs.angularjs.org/api/ng/directive/ngOptions
Hope this helps.

Bind enum values to ng-options angular js

The response JSON from a http GET method is as shown below
[
{
"1": "Open"
},
{
"2": "Expired"
}
]
How to bind this data in a select drop down box in angular js.
I tried with this option:
<select class="form-control" ng-model="selected" ng-options="item for item in data">
<option value="">----Select----</option>
</select>
But I'm getting [object,object] in the drop down list.

You could transform the json data into the format expected by ng-options simply using Array.reduce, along the lines of
$scope.options = data.reduce(function(memo, obj) {
return angular.extend(memo, obj);
}, {});
<select ng-model="selected" ng-options="key as val for (key, val) in options"></select>
Full example here http://plnkr.co/edit/PV4BYrz0KBkIFPWVzVaT?p=preview

you need a key,value in ng-repeat syntax as you have unknown or different keys
And you have to keep track of two repeats first for array and then for keys inside the objects
<select class="form-control" ng-model="selected" >
<option value="">----Select----</option>
<optgroup ng-repeat="v in values">
<option ng-repeat='(key,value) in v' value="{{key}}">{{value}}</option>
</optgroup>
</select>
Demo
value in option will be "open" or "expired" you can change it to keys "0" or "1" if you replace value={{value}} with value="{{key}}"
app = angular.module('test',[]);
app.controller('testctrl',function($scope){
$scope.values =[{"1": "Open" },{"2": "Expired" }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="testctrl" ng-app="test">
<span ng-if="selectedModel">{{selectedModel}}</span>
<select class="form-control" ng-model="selectedModel">
<option>----Select----</option>
<optgroup ng-repeat="v in values">
<option ng-repeat='(key,value) in v' value="{{value}}">{{value}}</option>
</optgroup>
</select>
</div>

Select Tag Options won't work with ng-repeat

I need to use ng-repeat with the options within a Select menu like so
<select name="category" id="category" ng-model="rumor.category" validation-pattern="requiredOnly" error-icon>
<option ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</option>
</select>
However on rendering my select is empty and when inspecting the console I see the following:
<select id="category" class="ng-scope ng-pristine ng-invalid ng-invalid-required" ng-model="rumor.category" name="category" required="required">
<option value="? undefined:undefined ?"></option>
</select>
Now I know I should really use ng-options on the select menu however I wish to include angular-ui / ui-select2 which is incompatable with ng-options and the documentation recomends using a repeater (see https://github.com/angular-ui/ui-select2)
When I use the same repeater on a different tag, for example:
<p ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</p>
the repeater works as expected. Any ideas why this is?
Thanks in advance.

You shouldn't use ng-repeat for select options. Use ng-options (link) instead:
<select name="category"
id="category"
ng-model="rumor.category"
validation-pattern="requiredOnly"
error-icon
ng-options="c.cat for c in formOptions.categories">
</select>

You can use select option with ng-repeat.
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.categories = [ {'cat' : '1'}, {'cat' : '2'}, {'cat' : '3'}, {'cat' : '4'}] ;
}
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="item.value">
<option ng-repeat="cat in categories" value="{{cat.cat}}">{{cat.cat}}</option>
</select>
</div>
</div>
You can also fiddle: http://jsfiddle.net/usmanfaisal/vHw7N/