I use Angular 1.5. I have two selects and I need to update 2nd select depending on the index of the option of 1st select.
Is there an easy way to get the index of option selected? Like from 0 to 5.
My 1st select is :
<select class="form-control" name="idEtablissement" ng-model="infosEtab.idEtablissement" ng-change="updateContrats()"
ng-options='item.id as item.name for item in listeEtablissement'>
</select>
I need something like that :
// return -1, listeEtablissement is [{id: 2, name: 'Test'}, {...}]
alert($scope.listeEtablissement.indexOf($scope.infosEtab.id));
$listeEtablissement is :
[{id: 2, name: 'Test'}, {id: 5, name: 'Test 2'}]
But I need to have the index, like 0 or 1.
EDITED
Ok I'll use Javascript approach, the most simple one :
$scope.updateContrats = function() {
var index = document.getElementById('idEtablissement').selectedIndex;
// ....
}
You should do it by native JavaScript using array.findIndex(); like in this runnable demo fiddle.
MDN reference of array.findindex()
View
<div ng-controller="MyCtrl">
<select class="form-control"
name="idEtablissement"
ng-model="infosEtab.idEtablissement"
ng-change="updateContrats()"
ng-options='item.id as item.name for item in listeEtablissement'>
</select>
</div>
AngularJS Application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.selectedIndex = null;
$scope.listeEtablissement = [{
id: 2,
name: 'Test'
}, {
id: 5,
name: 'Test 2'
}];
$scope.updateContrats = function() {
$scope.selectedIndex = $scope.listeEtablissement.findIndex(function(item) {
return item.id === $scope.infosEtab.idEtablissement
});
}
});
Change
ng-options
to
index as item.name for (index, item) in listeEtablissement
Related
I have a Key/Value List with 3 Entries, e.g.
0, Value1
1, Value2
2, Value3
3, Value4
If I change 2 to 0, the entry with index 2 should slip to the position 0 and the additional elements slip around a position to the back.
eg from 0-1-2-3 will then be 2-0-1-3
HTML
<div ng-controller="MyCtrl">
<div class="row-sort" ng-repeat="(key1, value1) in selectList">
<select class="row-select">
<option ng-repeat="(key2, value2) in selectList" value={{key2}} ng-selected="key1 == key2">{{key2}}</option>
</select>
<span class="row-label">{{value1.name}}</span>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.selectList = [{
idx: 0,
name: 'Value1'
}, {
idx: 1,
name: 'Value2'
}, {
idx: 2,
name: 'Value3'
}, {
idx: 3,
name: 'Value4'
}]
}
JS Fiddle Link
EDIT 1: It sould work like the jQuery Sortable Plugin, but only with Select-Boxes ...
Jquery Sortable
Anyone a idea how getting this work properly and correct with AngularJS?
Its required for Angular UI Grid (Reorder Columns)
Thank you very much!
You can add to your list selected key to bind it to ng-models for select and use orderBy:
$scope.selectList = [{
idx: 0,
selected: '0',
name: 'Value1'
}, {
idx: 1,
selected: '1',
name: 'Value2'
}, {
idx: 2,
selected: '2',
name: 'Value3'
}, {
idx: 3,
selected: '3',
name: 'Value4'
}];
HTML
<div class="row-sort" ng-repeat="(key1, value1) in selectList | orderBy : 'selected'">
<select class="row-select" ng-model="value1.selected">
<option ng-repeat="(key2, value2) in selectList"
value={{key2}}>{{key2}}</option>
</select>
<span class="row-label">{{value1.name}}</span>
</div>
EDIT
You can write watcher and replace positions for your items:
$scope.$watch(function () {
return $scope.selectList;
},
function (newVal, oldVal) {
var selectedItemId;
var selected;
angular.forEach($scope.selectList, function(item){
if(item.idx !== parseInt(item.selected)){
selectedItemId = item.idx;
selected = item.selected;
}
});
angular.forEach($scope.selectList, function(item){
if(item.selected === selected){
item.selected = ''+selectedItemId;
item.idx = selectedItemId;
selectedItemId = undefined;
selected = undefined;
}
if(item.idx !== parseInt(item.selected)){
item.idx = parseInt(item.selected);
}
});
},true);
Demo Fiddle 2
I have a dropdown with all countries and their phone code. My drop down as a limited space, so the text must be short.
When the dropdown is open, I want to show the the country name and the phone code, but when a user select an option, I only want to show the phone code on the dropdown as the selected value.
<select ng-model="country" ng-options="c.phoneNumberCountryCode as (c.countryName + ' (+' + c.phoneNumberCountryCode + ')' ) for c in countriesList">
</select>
http://jsfiddle.net/0fadq61k/
I would combine ng-selected with ng-click in an attempt to achieve this. The problem with ng-click (inherent in Angular itself) is that while it does refresh your whole list, it does not refresh the already selected item. I would suggest that you change your design. One thing you could do is use for example the first 3 letters of the country name, or a similar combination. Place the following code in your fiddle to see an example:
HTML
<div ng-controller="Ctrl">
<select ng-model="country" ng-options="c.phoneNumberCountryCode as (c.countryName + ' (+' + c.phoneNumberCountryCode + ')' ) for c in countriesList" ng-selected="onCodeSelected(country)" ng-click="onClick()">
</select>
</div>
JS
var app = angular.module('app', []);
function Ctrl($scope) {
//this should be in a service
$scope.countriesList = [{
id: 0,
countryName: 'Portugal',
phoneNumberCountryCode: '351'
}, {
id: 1,
countryName: 'Spain',
phoneNumberCountryCode: '34'
}, {
id: 2,
countryName: 'UK',
phoneNumberCountryCode: '44'
}, {
id: 3,
countryName: 'Australia',
phoneNumberCountryCode: '61'
}];
$scope.onClick = function () {
//refresh data from service instead of hardcoded like below
$scope.countriesList[0].countryName = "Portugal";
$scope.countriesList[1].countryName = "Spain";
$scope.countriesList[2].countryName = "UK";
$scope.countriesList[3].countryName = "Australia";
}
$scope.onCodeSelected = function(countryCode) {
if (countryCode) {
angular.forEach($scope.countriesList, function(value, key) {
if (value.phoneNumberCountryCode === countryCode) {
var countryShort = $scope.countriesList[value.id].countryName.substring(0, 3);
$scope.countriesList[value.id].countryName = countryShort;
}
})
}
}
}
Can you try this,
<div ng-controller="Ctrl">
<select ng-options="item as item.id for item in items" ng-model="selected"
ng-change="dispThis(selected)"
></select> {{output}}
<div>
and in script
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.items = [{
label: 'Portugal',
id: '351'
}, {
label: 'Spain',
id: '34'
}];
$scope.dispThis = function(c){
console.log(c);
$scope.output = "Country: "+c.label+" & Ph.code "+
c.id
};
}
I'm sure I must be doing this wrong, but:
I have an object that stores the id of an item. I also have an array of these items. I need to have a 'select' that represents the currently selected item, but that can also change the selected item.
I have set the 'select's model to the object.selectId.
The 'select' ng-options is "option.Text for option in options track by optionId"
Yet the model and 'select' options types don't match
How do I achieve what I need?
Here's a fiddle of what I am doing: https://jsfiddle.net/vb2xe1mc/5/
Code:
<script>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
id: 1
};
$scope.options = [
{Text: "zero", Id: 0},
{Text: "one", Id: 1},
{Text: "two", Id: 2},
{Text: "three", Id: 3}
];
$scope.selectChange = function() {
alert($scope.item.id);
};
}]);
</script>
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item.id" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
If you can, please let me know where I have gone wrong or correct the fiddle.
Thanks ^_^
Andy
Clarification:
The model item has id 1 already selected. I need the list to preselect the option with id 1 in this case. Also, When the option is selected it does not set the item.id to an int, rather it sets it to the entire option item. I need it to set the item.id to the option.Id
<select ng-model="item.id" ng-options="option.id as option.Text for option in options" ng-change='selectChange()'>
You want to select option.id, not option and track by is unnecessary.
Bind the select to ng-model="item", not ng-model="item.id".
Also decide on id vs. Id
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
console.log ($scope.item.Id)
alert($scope.item.Id);
};
}]);
See here for a fixed version: https://jsfiddle.net/ax3k418p/
https://jsfiddle.net/vb2xe1mc/10/
You need to bind item to ng-model, and inititally $scope.Id should be set to 1 not $scope.id = 1
Also check when you alert it should be alert($scope.item.Id);
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options" ng-change='selectChange()'>
</select>
</div>
</div>
JS:
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
alert($scope.item.Id);
};
}]);
If I want to set the value of the combobox I have tried this:
controllercode:
$scope.streettypeMockData = [{
name: 'Street',
value: 'Street'
}, {
name: 'Avenue'
}, {
name: 'Crescent'
}, {
name: 'Drive'
}, {
name: 'Road'
}, {
name: 'Highway'
}];
var sel = "Street";
var selectedValue = {
name: sel
};
$scope.streetTypeSelected = selectedValue;
Can anyone tell me why this does not work? see also http://plnkr.co/edit/4ISL8A1cNGCtafsc0leX?p=preview
The code has a few issues:
The ng-options select the name, while the ng-model points to an object. Better use streetType as streetType.name for streetType in streettypeMockData to select the entire object.
In this case, the initial value will not be honoured because Angular will try to compare objects by reference; use track by.
The full <select> should be:
<select class="form-control" ng-model="streetTypeSelected"
ng-options="streetType as streetType.name for streetType in streettypeMockData track by streetType.name">
See forked plunker.
You can simple use ng-init like this
<select ng-init="streetTypeSelected = streettypeMockData[0]" class="form-control" ng-model="streetTypeSelected" ng-options="streetType.name for streetType in streettypeMockData">
</select>
Working Demo
Also you can do Like as shown below
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.streettypeMockData = [
{name: 'Street', value: 'Street'},
{name: 'Avenue'},
{name: 'Crescent'},
{name: 'Drive'},
{name: 'Road'},
{name: 'Highway'}
];
$scope.streetTypeSelected = $scope.streettypeMockData[0];
});
Working Demo
Also take a look at this
https://docs.angularjs.org/api/ng/directive/select
I'm working with ngOptions to display a select element, and want to connect the model to the value that's set as the value in ngOptions.
var app = angular.module('test', []);
app.controller('TestCtrl', ['$scope',
function ($scope) {
//Use random to simulate different data from an API
$scope.default = Math.floor(Math.random()*3);
$scope.options = [
{
id: 0,
name: "Option 1"
},
{
id: 1,
name: "Option 2"
},
{
id: 2,
name: "Option 3"
}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestCtrl">
<select ng-model="default" ng-options="val.name for val in options track by val.id">
</select>
<pre>Default should be ID {{default}}, or Option {{default+1}}
</div>
</div>
I've tried using track by, select as, and I've found two solutions that work, but are not ideal.
Ideally, I'd be able to set default
Solution 1:
// Loop through entire array of objects
$scope.options.forEach(function (v, k) {
// Compare ID to what the default should be
if (v.id === $scope.default) {
// Set object to default
$scope.default = v;
return true;
}
});
Solution 2:
JS
$scope.options = {
"Option 1": 0,
"Option 2": 1,
"Option 3": 2
};
HTML
<select ng-model="default" ng-options="value as key for (key, val) in options">
The thing that's tough about this solution is it only works if the object has no more than two values, since a key cannot be an object.
Is there any way to have Angular set a default by key, without having to include the entire object?
try it like this
<select ng-options="item.id as item.name for item in options" ng-model="selected"></select>
then in controller
$scope.selected = 1;
similar plunkr example
var app = angular.module('test', []);
app.controller('TestCtrl', ['$scope',
function ($scope) {
//Use random to simulate different data from an API
$scope.options = [
{
id: 0,
name: "Option 1"
},
{
id: 1,
name: "Option 2"
},
{
id: 2,
name: "Option 3"
}
];
$scope.default = $scope.options[Math.floor(Math.random()*3)];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestCtrl">
<select ng-model="default" ng-options="val.name for val in options">
</select>
<pre>Default should be ID {{default.id}}, or Option {{default.id+1}}
</div>
</div>