We Keep Coding

How to store selected value in ng-model if source list is array of objects?

I have array of objects like:
vm.items = [{id: "1", val: "a"},{id: "2", val: "b"},{id: "3", val: "c"}]
And I bound it to select option like:
<select ng-model="vm.model.id" >
<option value="">select somthing</option>
<option ng-repeat="i in vm.items" value="{{i.id}}">{{i.val}}</option>
</select>
But when I select some item from dropdown I get whole object {} and I want only id.
How can I do that?

You can use the ng-options directly on the select tag. If your json contains an id and name variable you can specify it as this:
<select ng-model="vm.model.id" ng-options="i.id as i.name for i in vm.items">
<option value="">select somthing</option>
</select>
The i.id is set to the options value and the i.name is set to the text

Use ng-model and ng-options in select to achieve this.
Inside controller.js
$scope.selectedItem = "";
Markup
<select ng-model="selectedItem " name="state"
ng-options="item.id as item.value for item in vm.items">
<option value="">select somthing</option>
</select>

AngularJS ng-model definition for dropdown tree structure

I have a problem with my AngularJS application in which I have to chose the data from the dropdowns.
The problem is that when the first dropdown (brands) is changed the data must be injected only into second dropdown (models), not globally, to all the others second dropdowns - as shown in the jsfiddle.
JsFiddle
I know, that the problem is in the ng-model - how to should I define the ng-model?
<div ng-controller="MyCtrl">
<div ng-if="car" ng-repeat="car in cars">
<br><label>{{car.name}}</label><br>
<label>brand</label>
<select ng-model="car.brand" ng-options="car as car.name for car in brands" ng-change="loadBrands($index)">
<option value="">select</option>
</select>
<label>model</label>
<select ng-model="car.brand.model" ng-options="car as car.model for car in models">
<option value="">select</option>
</select>
<button ng-click="show($index)">show</button>
Thanks.

Instead of changing the $scope.models globally for all cars, you should update the models only for the selected Car:
JSFiddle with the following modifications:
$scope.loadBrands = function(index) {
if ($scope.cars[index].brand.name == 'audi') {
$scope.cars[index].models = $scope.audi;
} else {
$scope.cars[index].models = $scope.bmw;
}
}
and the select for the models should be changed to:
<select ng-model="brand.model" ng-options="car as car.model for car in cars[$index].models">
<option value="">select</option>
</select>

ng-model in select box is not working correctly

I am using angular js to draw select boxes.
<select ng-model="selected">
<option value="{{obj.id}}" ng-repeat="obj in values">{{obj.name}} </option>
</select>
selected id - {{selected}}
Here the default selected is not initialized according to value selected.
Have made a fiddle for the problem.

You should use ngOptions directive to render selectbox options:
<select ng-model="selected" ng-options="obj.id as obj.name for obj in values"></select>
Fixed demo: http://jsfiddle.net/qWzTb/1984/

case 2 is updated in this plunker
http://jsfiddle.net/26yjn8ru/
<div ng-repeat="arr in itr">
<select ng-model="arr.id"
ng-options="value.id as value.name for value in values">
</select>

Just add ng-selected="selected == obj.id" in the option tag
<option value="{{obj.id}}" ng-repeat="obj in values" ng-selected="selected == obj.id" >
{{obj.name}}
</option>

Correct Way would be like :
<select id="select-type-basic" [(ngModel)]="status">
<option *ngFor="let status_item of status_values">
{{status_item}}
</option>
</select>
Value Should be avoided inside option since that will set the default value of the 'Select field'. Default Selection should be binded with [(ngModel)] and Options should be declared likewise.
status : any = "Completed";
status_values: any = ["In Progress", "Completed", "Closed"];
Declaration in .ts file

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>

Working with select binding in angularjs

I'm running my head against the wall here trying to bind a pre-defined select box's selected attribute depending on a property on an object.
What I have is a collection of objects: Items and an Item object has the StatusCode property which is either 0, 1 or 2.
On my markup I have the following:
<div ng-repeat="fb in feedbackItems | orderBy: 'Id'">
<select>
<option value="0">Some text</option>
<option value="1">Some other text</option>
<option value="2">Text 3</option>
</select>
</div>
What I need is to check if the StatusCode of my fb object is either 0, 1 or 2 and then set the selected="selected" attribute on the right option.
When the client chooses another option, the fb object should be updated aswell.
My controller looks like this:
app.controller('feedbackController', function($scope, feedbackService, $filter) {
// Fields
var takeCount = 20;
var currentNodeId = $('.current-id').text();
// Constructor for this controller
init();
function init() {
feedbackService.getFeedbackPaged(currentNodeId, 1, takeCount).then(function(response) {
$scope.feedbackItems = response.data.Items;
$scope.CurrentPage = response.data.CurrentPage + 1;
$scope.TotalPages = response.data.TotalPages;
$scope.TotalFeedbackItems = response.data.TotalItems;
$scope.FeedbackCount = response.data.Items.length;
});
}
});
Is there any way of doing this? :-)
Thanks in advance!

Make sure to put the model on the there. Not sure what your model looks like but based on how I read your question:
<div ng-repeat="fb in feedbackItems | orderBy: 'Id'">
<select data-ng-model="fb.StatusCode"> <!-- here -->
<option value="0">Some text</option>
<option value="1">Some other text</option>
<option value="2">Text 3</option>
</select>
or if feedback items is actually your option list (like jbird said)
<div >
<select data-ng-model="Item.StatusCode" ng-options="fb.id as fb.text for fb in feedbackItems"></select>
</div>