I'm trying to set ng-selected in my option element, selected attribute is set to true, but option not selected, When I remove ng-model from select all become working.
The question: How to make option selected, when I'm using the model?
Here is my plunker (selected not working here)
My code:
var app = angular.module("plunker", []);
app.controller("TestController", ["$scope", function($scope) {
$scope.test = 1;
$scope.array = [
{"id": 1, "name": "first"},
{"id": 2, "name": "second"},
{"id": 3, "name": "third"}
];
}]);
My template:
<body ng-controller="TestController">
Selected item must be {{ array[test-1].name }}
<select ng-model="myModel">
<option value="">Choose item..</option>
<option ng-repeat="item in array"
ng-value="item.id"
ng-selected="item.id == test">
{{ item.name }} ({{item.id == test}})
</option>
</select>
</body>
Thanks a lot for any help!
Don't use ngSelected with ngRepeat. Go with ngOptions:
<body ng-controller="TestController">
Selected item must be {{ array[test-1].name }}
<select ng-model="myModel" ng-options="item.id as item.name for item in array">
<option value="">Choose item..</option>
</select>
</body>
Don't use ngSelected with ngModel
From the Docs:
Note: ngSelected does not interact with the <select> and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
— AngularJS ng-selected API Reference
See additional Docs:
Using ng-repeat to generate select options
Using select with ng-options and setting a default value
See Stackoverflow:
Using ng-repeat to generate select options (with Demo)
Related
At the moment I have a select, but i need to have custom styling for my options, that requires me to change my setup a bit.
At the moment I have
<select ng-model="vm.selectedStation"
ng-options="s.stationName for s in vm.nearbyStations" .....>
</select>
Now I am changing it to
<select ng-model="vm.selectedStation">
<option ng-repeat="s in vm.nearbyStations" value="{{s}}">
{{s.stationName}}
</option>
</select>
It visibly shows the same, but the value is different. I require ng-model to be s. to be the object, but instead it shows as the s.stationName May I ask how do I set the value properly
Use the ng-value directive:
<select ng-model="vm.selectedStation">
̶<̶o̶p̶t̶i̶o̶n̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶s̶ ̶i̶n̶ ̶v̶m̶.̶n̶e̶a̶r̶b̶y̶S̶t̶a̶t̶i̶o̶n̶s̶"̶ ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶s̶}̶}̶"̶>̶
<option ng-repeat="s in vm.nearbyStations" ng-value="s">
{{s.stationName}}
</option>
</select>
Interpolation with curly brackets {{ }} converts the expression to a string. The ng-value directive evaluates the expression and retains its type.
For more information, see
AngularJS ng-value Directive API Reference
AngularJS <select> - Using ngValue to bind the model to an array of objects
Simply use ng-value on each <option> to assign directly to each constituent of vm.nearbyStations.
See an example usage below.
(As an aside, your HTML appears to have an unpaired </option>.)
angular
.module('app', [])
.controller('ctrl', function () {
this.nearbyStations = [
{ stationName: 'a' },
{ stationName: 'b' },
{ stationName: 'c' },
];
});
<script src="https://unpkg.com/angular#1.7.9/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
<select ng-model="vm.selectedStation">
<option ng-repeat="s in vm.nearbyStations" ng-value="s">{{ s.stationName }}</option>
</select>
<pre>selectedStation = {{ vm.selectedStation }}</pre>
</div>
This problem is driving me crazy. I am trying to pre-select a value using ng-options as follows:
<select name="listing_type_id" ng-model="listing_type_id"
ng-options="i.id as i.name for i in listingTypes">
</select>
This work but my value in the generated drop-down are prefixed with "number:" - for some reason which is baffling.
I know that this doesn't happen in earlier version of Angular 1.x. I am using 1.6.1 which is affected by this annoyance.
I have done some reading and people suggest to use "track by i.id" in the ng-options directive, this did remove the type prefix as desired but also killed my pre-selected item. I also read that I should not care about how the value is rendered in the value field as i should be using the $scope to read the selected item. In my case I am not submitting my form via angular, I'm just using angular for some validation.
Here is my fiddle:
https://jsfiddle.net/qhg63w2f/
Please pre defile your values in controller what you selected.
var app = angular.module('testApp', []);
app.controller('testController', ['$scope', function($scope) {
/* Pre defile values if you are not seleted than blank pass*/
$scope.myDropDown = 'two';
/* ng-options values pre define */
$scope.names = ["one", "two", "three"];
$scope.listing_type_id = 3;
$scope.listingTypes = [
{"id" : 1, "name" : "one"},
{"id" : 2, "name" : "two"},
{"id" : 3, "name" : "three"}
];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController as $ctrl">
<div>
Simple select dropdown :
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
<!-- ng-option to set values from controller and pre define selected values -->
<div>
ng-option :
<select ng-model="myDropDown" ng-options="item for item in names"></select>
</div>
<div ng-if="myDropDown == 'two' || myDropDown == 'three'">
<!-- Will be displayed only when you select 'two' or 'three' -->
<input type="text" ng-model="fname" />
</div>
<div>
Your Code ng-option :
<select name="listing_type_id" ng-model="listing_type_id" ng-options="i.id as i.name for i in listingTypes"></select>
</div>
</div>
<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)"
ng-disabled="!mineSelected">
<!--<option value=""></option>-->
<option value="">Select</option>
</select>
When I add
$scope.machineSelected = "";
dynamically wherever in the controller, option in drop-down should set as "Select", but it is not updating.
Use null or undefined, not an empty string, as the "not selected" value.
That's what the docs say:
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option. See example below for demonstration.
It's not really clear that an empty string can't be used, but at least they mention null.
Set default option in controller and dynamically change based on selected item
<select ng-model="selectedItem" ng-change="getSelectedText()">
<option >All Items</option>
<option >Active Subscriptions Only</option>
<option >Expired Only</option>
</select>
Controller
app.controller('SelectedTextController', function ($scope) {
$scope.selectedItem = "All Items";
$scope.getSelectedText = function () {
var selectedItem=this.selectedItem;
};
});
Use null for the unselected value:
̶$̶s̶c̶o̶p̶e̶.̶m̶a̶c̶h̶i̶n̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶"̶"̶;̶
$scope.machineSelected = null;
The ng-options directive was re-factored with AngularJS V1.6. Before then the default could be selected with an empty string. Now the default is selected by assigning null to the model.
For more infomation, see
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-options Directive API Reference
AngularJS Developer Guide - Migrating to V1.6 - select directve
ng-options is hiding the blank value with AngularJS V1.5
The DEMO
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.machineList = [
{ _id:1, name: "Megatron" },
{ _id:2, name: "Starscream" },
{ _id:3, name: "Shockwave" },
];
$scope.machineSelected = null;
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)">
<option value="">Select</option>
</select>
<br>
machineSelected={{machineSelected}}
</body>
I have a form with with option list
<form class="column-form">
<select id="classSelection" ng-change="classOptionChange()" ng-model="selectedClass" maxHeight="120">
<option selected value="">{{classOptions}}</option>
</select>
</form>
Sample class options is here
[{"id":"classR","text":" Color - Red"},{"id":"classG","text":"Color - Green"}, {"id":"classY","text":"Color - Yellow"}]
My directive is simple as I'm just trying to print out the value of my selected option. However, it's always null.
(function() {
appModule.directive('classDefault', [ '$translate', '$timeout', '$window', classService, function($translate, $timeout, $window, $document, classService) {
return {
restrict : 'E',
scope : {
.......
}
link : function(scope, element) {
scope.classOptionChange() = function() {
console.log(scope.selectedClass);
Any suggestions?
UPDATE - Thanks for all the suggestions below. Apparently, we are using this widget that supposed to render the option lists and then bind to the select tag but it is currently broken.
You need to bind the array to the select tag. One option to do so is to use the NgOptions directive.
Here's an working example
angular.module("app",[]).controller("ctrl", function($scope){
$scope.items = [{"id":"classR","text":" Color - Red"},{"id":"classG","text":"Color - Green"}, {"id":"classY","text":"Color - Yellow"}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-change="classOptionChange()"
ng-model="selectedClass"
maxHeight="120"
ng-options="item as item.text for item in items">
</select>
<h3>{{selectedClass}}</h3>
</div>
It seems like you are not properly rendering all options that have been passed down to your directive. Ideally you should loop over the classOptions collection using ng-repeat/ng-options directive and render the select tag filled option's. And then specify ng-value-"opt" on each of your option element. That will basically help you assign whole option object to selectedClass ng-model.
Template
<form class="column-form">
<select id="classSelection"
ng-change="classOptionChange()" ng-model="selectedClass"
maxHeight="120">
<option selected value="">Select option</option>
<option ng-value="opt" ng-repeat="opt in classOptions">{{opt.text}}</option>
</select>
</form>
Demo Plunker
I'm trying to set ng-selected in my option element, selected attribute is set to true, but option not selected, When I remove ng-model from select all become working.
The question: How to make option selected, when I'm using the model?
Here is my plunker (selected not working here)
My code:
var app = angular.module("plunker", []);
app.controller("TestController", ["$scope", function($scope) {
$scope.test = 1;
$scope.array = [
{"id": 1, "name": "first"},
{"id": 2, "name": "second"},
{"id": 3, "name": "third"}
];
}]);
My template:
<body ng-controller="TestController">
Selected item must be {{ array[test-1].name }}
<select ng-model="myModel">
<option value="">Choose item..</option>
<option ng-repeat="item in array"
ng-value="item.id"
ng-selected="item.id == test">
{{ item.name }} ({{item.id == test}})
</option>
</select>
</body>
Thanks a lot for any help!
Don't use ngSelected with ngRepeat. Go with ngOptions:
<body ng-controller="TestController">
Selected item must be {{ array[test-1].name }}
<select ng-model="myModel" ng-options="item.id as item.name for item in array">
<option value="">Choose item..</option>
</select>
</body>
Don't use ngSelected with ngModel
From the Docs:
Note: ngSelected does not interact with the <select> and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
— AngularJS ng-selected API Reference
See additional Docs:
Using ng-repeat to generate select options
Using select with ng-options and setting a default value
See Stackoverflow:
Using ng-repeat to generate select options (with Demo)