I have option element in select:
$scope.countries = {0 : 'Select country...'};
And ng-model="selected" is integer 0;
But option is not selected. How I can select option with 0?
Im not sure I understood what you were trying to do...
but I think you want to show the text when the value 0 is selected in the ngModel... so you want the ngOptions to go by the value but show the text?
so you want something like:
ng-options="country as country.id for country in countries track by country.id"
please check.... so you can actually do something like
<select ng-options="item.subItem as item.label for item in values track by item.id" ng-model="selected">
$scope.values = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
$scope.selected = { name: 'aSubItem' };
please check
ngOptions docs
If I got you correctly then you are looking for something like this
<html>
<body ng-app="myApp" ng-controller="HomeCtrl">
<select ng-model="selected" ng-options="v for (k,v) in country ">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('myApp', []);
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.selected='Select country...'; // dafault to be displayed
$scope.country={0 : 'Select country...', 1:'France', 2:'India', 3:'USA'};
}]);
</script>
</body>
</html>
Note :- The key of an object will always have to be of string data type. You cannot use integer or number , that will be treated as string only.
Related
I have options array for select dropdown like
[
{key:1,value'foo',selected:true},
{key:2,value'foo2',selected:false}
]
I want to select option value with the property selected true in my model. So for this option array of my model should be initialized and bind to 1.
Any help is appreciated!! Thanks in advance :)
For this i know i can do it by looping in controller and setting the value whose property selected is true. I am looking for an alternative which is better. Also i have tried ng-repeat on options and it works, but i think ngOptions is better from the view of performance.
If I understood the requirements correctly:
angular.module('selectExample', [])
.controller('ExampleController', ExampleController);
ExampleController.$inject = ['$scope'];
function ExampleController($scope) {
$scope.selectOptions = [{
key: 1,
value: 'foo',
selected: true
},
{
key: 2,
value: 'foo2',
selected: false
}
];
$scope.filterOptions = filterOptions;
setFirstOptions($scope, 'selected', $scope.selectOptions);
}
function filterOptions(data) {
return data.filter(function(item) {
return item.selected;
});
}
function setFirstOptions($scope, variable, data) {
var filteredOptions = filterOptions(data);
if (filteredOptions.length > 0) {
$scope[variable] = filteredOptions[0];
}
}
angular.bootstrap(
document.querySelector('body'), ['selectExample']
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="ExampleController">
<select ng-model="selected" ng-options="option.value for option in filterOptions(selectOptions)">
</div>
I am loading a select control in angular js from an array of json objects.
I want to set the selected property if the ordinal position of an item in the collection matches some value (such as 3 for example), eg,
<option ng-repeat="query in ReportQueries" selected="query.ordinal==3"
value="query.ReportQueryID">{{query.QueryName}}</option>
There is no property "ordinal" on my object, I am hoping there is some index or counter angular generates and exposes when iterating through a collection.
Does anyone know if this is possible? Thanks
Thanks
Here is an Example which may help you: Updated
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.test = 3;
$scope.ReportQueries = [{
ReportQueryID: 1,
QueryName: 'Amy'
}, {
ReportQueryID: 2,
QueryName: 'Ben'
}, {
ReportQueryID: 3,
QueryName: 'Betty'
}, {
ReportQueryID: 4,
QueryName: 'Hannah'
}, {
ReportQueryID: 5,
QueryName: 'John'
}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="test">
<option ng-repeat="query in ReportQueries" ng-selected="test==$index">{{query.QueryName}}</option>
</select>
<h1>Selected Index is: {{test}}</h1>
</div>
I have the following html for drop down.
<select id="selection">
<option value="{{n}}" ng-repeat="n in selections">{{n}}</option>
</select>
where selections is an array of strings and the array lives in my angularJS controller.
The initial data for the select options are correct, but When the array is updated by getting assigned as [] and then pushed in some new data, the select options does not update accordingly.
Are there workarounds for this?
Sample controller:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
html -
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
use ng-options instead of ng-repeat.
I can successfuly bind an array to a select tag in angular using this syntax:-
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', [
'$scope',
function ($scope) {
$scope.testArray = [{ text: '1st', value: 1 }, { text: '2nd', value: 2 }];
}]);
My HTML is like this:-
<select ng-model="testModel" ng-options="theTitle.text as theTitle.text for theTitle in testArray"></select>
However this creates an option list like this:-
<select ng-options="theTitle.text as theTitle.text for theTitle in testArray" ng-model="testModel" class="ng-pristine ng-valid">
<option value="?"></option>
<option value="0">1st</option>
<option value="1">2nd</option>
</select>
How do you bind the value property in the array to the option value attribute and why does it display the first option as a ?
Is there something else I need to put in my ng-options attribute?
in in html section:
<select ng-model="testModel" ng-options="theTitle.text for theTitle in testArray"></select>
in javascript section
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', [
'$scope',
function ($scope) {
$scope.testArray = [{ text: '1st', value: 1 }, { text: '2nd', value: 2 }];
$scope.testModel = $scope.testArray[0];
}]);
The reason that ? Is showing is because your ngModel has not been initialized. In mainController, initialize testModel to '1st'. You will see that the ? goes away, and your drop down list is initialized to your first item
In ng-options, the format goes value as alias, so you need:
<select ng-model="testModel" ng-options="theTitle.value as theTitle.text for theTitle in testArray"></select>
The ? option is created because your model value does not exist as an option in the select, so the browser adds it to display the input as empty. To fix it you want to initialise the model to a valid value, something like: ng-init="testModel = testArray[0].value"
I have created a plunkr to emphasize the problem, perhaps it's because the source of the ng-repeat is a function, I am not sure, but so far I've tried everything in order to solve this, and couldn't mange.
plunkr:
http://plnkr.co/edit/qQFsRM?p=preview
HTML
<html>
<head>
<script data-require="angular.js#1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='myApp' ng-controller='mainCtrl'>
<ng-include src="'menu.html'">
</ng-include>
</html>
Script
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $httpBackend){
$scope.model = {};
$scope.model.myJobs = {};
$scope.refreshJobs = function(){
}
});
app.controller('menuCtrl', function($scope){
$scope.model.locations = function(){
var loc = [];
loc[1] = 'Dublin';
loc[2] = 'Stockholm';
loc[3] = 'New Jersy';
$scope.model.selectedLocationDef = loc.indexOf('Dublin');
return loc;
}
$scope.model.selectedLocation = $scope.model.selectedLocationDef;
$scope.$watch('model.selectedLocation', function(location){
$scope.refreshJobs(location);
});
});
If you use an array as model, then the model is a string not a number. So you need to convert the number to string. Just try
$scope.model.selectedLocation = '1';
Last I checked, Angular does not support the ability to bind array keys to ng-model via ng-options. You can, however, mimic this behavior using an object hash:
menu.html:
<div ng-controller="menuCtrl">
<select ng-model="model.selectedLocation" ng-options="x.value as x.label for x in model.locations()">
</select>
</div>
script.js:
$scope.model.locations = function(){
var loc = [{
value: 0,
label: 'Dublin'
}, {
value: 1,
label: 'Stockholm'
}, {
value: 2,
label: 'New Jersey'
}];
$scope.model.selectedLocation = 1; // Set default value
return loc;
}
Bear in mind that this will bind the integers to your model, and not the cities themselves. If you want your model value to be Dublin, Stockholm, or New Jersey, simply do:
menu.html:
<div ng-controller="menuCtrl">
<select ng-model="model.selectedLocation" ng-options="name for name in model.locations()">
</select>
</div>
script.js:
$scope.model.locations = function(){
var loc = ['Dublin', 'Stockholm', 'New Jersey'];
$scope.model.selectedLocation = 'Dublin'; // Set default value
return loc;
}