We Keep Coding

Get the value of ng-model inside ng-repeat

In my Angularjs project, I have problem while using ng-model inside ng-repeat. When i select the value in select box, the selectbox automatically gets selected with previous selected value. I think this is due to the same ng-model inside ng-repeat. How can we fix this issue?
HTML:
<div ng-repeat="x in data">
<select class="selectbox_menulist" ng-change="endpoint.showEndPointStatsData()" ng-model="graphSelect.value">
<option ng-repeat="opt in mapOptions" value="{{opt.value}}">{{opt.type}}</option>
</select>
</div>
JS:
$scope.mapOptions = [
{ value: "bytes",type:"Bytes/sec" },
{ value: "packets",type:"Packets/sec"},
{ value: "megabytes",type:"Megabytes/sec"}
];
showEndPointStatsData: function() {
console.log('Function called ====');
console.log($scope.graphSelect.value);
}

Use array to store value of mutli ng-model in ng-repeat:
<div ng-repeat="x in data track by $index">
<select class="selectbox_menulist" ng-change="endpoint.showEndPointStatsData($index)" ng-model="graphSelect[$index]">
<option ng-repeat="opt in mapOptions" value="{{opt.value}}">{{opt.type}}</option>
</select>
</div>
$scope.mapOptions = [{ value: "bytes",type:"Bytes/sec" }, { value: "packets",type:"Packets/sec"},{ value: "megabytes",type:"Megabytes/sec"}];
$scope.graphSelect = new Array($scope.data.length);
showEndPointStatsData: function(index) {
console.log('Function called ====');
console.log($scope.graphSelect[index]);

ng-model inside ng-repeat
jsfiddle
The above link has good description on how to use it with examples

ng-init not setting first select options in ng-options

I have a simple select element and I am trying to initialize the value but for some reason it is failing, i.e. not taking the init value
HTML
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.display for item in possibility track by item.value"
ng-init="EventDetails.lossGainProb">
JavaScript
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = 5;

Based on the given code I have created small working demo here
<div ng-app="myApp" ng-controller="myCtrl">
<select class="select-form-control" ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility">
</select>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.possibility =[ {
display : '0%',
value : 0
}, {
display : '5%',
value : 5
}];
$scope.lossGainProb = $scope.possibility[1].value;
});

You need the tracked item for the list tracked by angular. Try this:
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = $scope.possibility.filter(function(item){ return item.value === 5})[0];
Working Codepen http://codepen.io/gpincheiraa/pen/bpbMom

There are two mistakes I see:
You are using ngInit incorrectly. It does not specify the initial binding for the ngModel directive, it is an expression which is evaluated against the scope after the scope is initialized. To specify initial model bindings, you need something like
<select ng-init="lossGainProb = EventDetails.lossGainProb"></select>
Another (better) approach is to specify this in your controller directly, like
$scope.lossGainProb = $scope.EventDetails.lossGainProb;
Your ngModel is bound to the entire "possibility" object rather than just the value property. I am assuming that you want just the value to be your model value. In this case, you should set ngOptions like
<select ng-options="item.value as item.display for item in possibility"></select>
This specifies that ngModel should be bound to item.value with item.display being used as the label.
Putting these together, your select should look like
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility"
ng-init="lossGainProb = EventDetails.lossGainProb">
</select>
Here is a working Plunker.

This will work without using ng-init - initializing in the controller:
$scope.lossGainProb = {};
$scope.lossGainProb.value = 5;
ng-init should not be used if possible - https://docs.angularjs.org/api/ng/directive/ngInit.

an alternate approach would be this one:
<select class="select-form-control" ng-init="lossGainProb = possibility[1].value" ng-model="lossGainProb" ng-options="item.value as item.display for item in possibility"> </select>

AngularJS select options with id and array index

I want to have a drop down select box with options coming from an array and I want to have access to the some property of the selected option and the array index.
So, for example I have an array:
selectOptions = [{id: 1, name: 'name1'}, {id: 2, name: 'name2'}, {id: 3, name: 'name3'}];
and when one of the options is chosen I want to have access to the selected option's id and index position in selectOptions.
Right now I have this for selecting the id:
<select name="currentlySelected" ng-model="selectedId" ng-options="cat.id as cat.name for cat in selectOptions" ng-change="change(selectedId)">
</select>
But I also want to send as an input to the change function the index of the selected option in the selectOptions array. I want to be able to do this:
$scope.change = function ($parentId, $arrayId) {
$scope.currentlySelected = $scope.selectOptions[$arrayId];
$scope.selectedId = $parentId;
};
Does someone know how to do this?

Before I give you a solution I want to first suggest that you dont do what you are trying to do. You are basically keeping track of the same thing twice. You want the selected object and the selected id. If you keep track of the selected object you always have the id as well. I would suggest you try to keep track of just the selected object. When you need the id just use object.id
Why dont you select the object and then sync the property:
<select name="currentlySelected" ng-model="selectedItem"
ng-options="cat as cat.name for cat in selectOptions"
ng-change="change()">
</select>
Then in your code
$scope.change = change;
function change() {
$scope.selectedId = $scope.selectedItem && $scope.selectedItem.id
}

You can use the object as the value reference:
<select name="currentlySelected" ng-model="selectedId" ng-options="cat as cat.name for cat in selectOptions"> <!-- You don't need the ng-change, it's not neccecary -->
And in your controller, you need to save a the reference to the object in the array:
$scope.change = function ($arrayId) {
$scope.currentlySelected = $scope.selectOptions[$arrayId];
console.log($scope.selectedId); // THE MODEL HOLES THE OBJECT ITSELF
};
$scope.change(1); // EXAMPLE for changing the value from the code

Check the sample below, this should help you to get things done
ng-options="{catId: cat.id, index: idx} as cat.name for (idx, cat) in selectOptions"
angular.module('app', []).run(function($rootScope){
$rootScope.selectOptions = [{id: 1, name: 'name1'}, {id: 2, name: 'name2'}, {id: 3, name: 'name3'}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<select name="currentlySelected" ng-model="selectedId" ng-options="{catId: cat.id, index: idx} as cat.name for (idx, cat) in selectOptions">
</select>
<p>
selectedId: {{selectedId}}
</p>
</div>

Angularjs selectedOption not working

I have been trying to set the default selected option of the select box, don't know where I'm doing wrong.
here is my html
<span ng-controller="sizeController" style="width:137px; float:left; margin:15px 0 0 10px; ">
<label for="sizeSelect" style="float:left; color:orange">Size:</label>
<select name="sizeSelect" id="colorSelect" style="width:90px" ng-model="size" ng-change ="onSizeChange(size)">
<option ng-repeat="sizeoption in data.sizeOptions" value="{{sizeoption.id}}">{{sizeoption.name }}</option>
</select>
</span>
controller goes here
function sizeController($scope, $rootScope) {
$scope.data = {
sizeOptions: [
{id: 'Small', name: 'Small'},
{id: 'Medium', name: 'Medium'},
{id: 'Large', name: 'Large'},
{id: 'XLarge', name: 'XLarge'}
],
selectedOption: {id: 'Small', name: 'Small'}
};
$scope.onSizeChange = function(size){
$rootScope.size = size;
};
}
By default first value in the select box is always empty.
dont't know why.
thanks in advance

Please do yourself a favor by using ng-options instead of ng-repeating the options yourself.
<select name="sizeSelect"
id="colorSelect"
style="width:90px"
ng-model="size"
ng-change="onSizeChange(size)"
ng-options="sizeoption.id as sizeoption.name for sizeoption in data.sizeOptions">
</select>
Initialize by setting the model directly
$scope.size = "Small";

I make solution for you. Use ng-option for select in angular.
Solution
Here is more about ng-option:
ngOption

The first value in the select box is always empty because it is undefined. The select dropdown (ng-model="size") corresponds to size attribute of model, which is initially undefined. Initialize the size in the scope to one of the possible values like below, it will remove the undefined empty first option.
$scope.size = 'Medium';
But even if you initialize size to 2nd or 3rd option it will still select the first option, now you have to use ng-select to select the correct value ng-selected="size == sizeoption.id"
Complete solution here

Angular generating an empty <option>

I am generating some <option> elements using the ng-repeat directory. Using ng-repeat instead of ng-options is intentional.
However, it generates an empty option in addition to the actual array. Here's the code:
<select name="type" class="form-control" ng-model="selected_type" ng-change="select_change()" >
<option ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>
$scope.types = [
{value: '1', name: 'Sale'},
{value: '2', name: 'Other'}
];
$scope.selected_type = $scope.types[0].value;
And a fiddle: http://jsfiddle.net/HB7LU/521/

Here's a working fiddle, using ng-options
http://jsfiddle.net/HB7LU/527/
<select ng-model="selected_type" ng-change="select_change()" ng-options="c.name for c in types">
Then on script.js:
$scope.selected_type = $scope.types[0];
With that said, since you're just partly using angularjs you can just map the data in an array before you actually post in say in PHP.

try ng-options instead of making options tag yourself:
<div ng-controller="MyCtrl">
<select ng-model="selected_type" ng-change="select_change()" ng-options="type.value as type.name for type in types">
</select>
</div>
http://jsfiddle.net/aBPdv/
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.types = [
{value: '1', name: 'Sale'},
{value: '2', name: 'Other'}
];
$scope.selected_type = $scope.types[0].value;
$scope.select_change = function(x){
alert($scope.selected_type);
}
}

Just use the ng-model attributes on your option tag not on your select tag (use it where the ng-repeat is defined) like that :
<select ng-change="select_change()">
<option ng-model="selected_type" ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>
Then change your
$scope.selected_type = $scope.types[0].value;
to
$scope.selected_type = $scope.types;
But your ng-change will not work because no ng-model attribute is set so no ngModelController is assign to this element.
So if you want to know when the value of the select change you have to do a directive on the select element.
For all these reasons ng-options is always and i say always the right direction for a select input usage.