Not displaying first option in select Element?
Here drop down list starting with empty option.Why i am not getting first option as o index of array?
Why does angularjs include an empty option in select
how to use ng-option to set default value of select element
Customized select element options in AngularJS
how to display option as selected in select box in angularjs?
Obtaining the selected option in a select element with AngularJS
First selection of element not working in IE
selected element in ng-options with array
How to select first select option after filtering in Angular
Display unlisted value in select with ng-options
displaying a selected value with ng-options angularjs
How to set a selected option of a dropdown list control using angular JS
How to select first element in select list Angular JS?
how to make the first option active in ng-select coming inside ng-repeat
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selected" ng-init="a" >
<option ng-repeat="a in ['CSE','ECE','CHEM','MME','CE']">{{a}}</option>
</select>
<p>{{selected}}</p>
</body>
</html>
You need to assign selected in order for it to select the option of your choice. In your code, selected is null/undefined and therefore your first option won't be selected.
Here is how I usually solve this problem:
js
app.controller('MainCtrl', function($scope) {
$scope.arr = ['CSE','ECE','CHEM','MME','CE'];
});
html
<body ng-controller="MainCtrl">
<select ng-model="selected" ng-init="selected = arr[0]" >
<option ng-repeat="a in arr">{{a}}</option>
</select>
<p>{{selected}}</p>
</body>
In ng-init I assign selected to be the first element of the array, this will make this option be selected by default.
Related
This question already has answers here:
Remove Blank option from Select Option with AngularJS
(12 answers)
Closed 5 years ago.
I have a queation to AngularJS Guru. Is it possibile to remove blank value from next listing where klassList is some list of objects. I need
exactly ng-repeat and not ng-options [{"id":1,"klassName":"11A","pupils":null},{"id":2,"klassName":"12B","pupils":null}] :
<input type="text" class="form-control" ng-model="klassName1"/>
<select class="form-control" ng-model="selectedItem" >
<option ng-repeat="klass in klassList | filter : {klassName : klassName1}">{{klass.klassName}}</option>
</select>
My target is to obtain dropdown list with possibility of filtering values.
Use ng-options
ng-options="givendata as givendata .klassName for givendata in klassList"
angular.module('app', []).controller('SelectorCtrl', function($scope) {
$scope.klassList = [{"id":1,"klassName":"11A","pupils":null},{"id":2,"klassName":"12B","pupils":null}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="SelectorCtrl">
<h1>Hello!</h1>
<select class="form-control" ng-model="selectedItem" id="state" ng-model="divisionsSource" ng-options="givendata as givendata.klassName for givendata in klassList">
<option value=''>Select</option>
</select>
</body>
</html>
I am implementing a Search feature in my AngularJS tutorial application. So, whenever a user types in the Search <input> field, I want to change my document's <title>.
For this, I am using query model with ng-bind-template in my document's <title> to avoid double curly braces {{}} flicker effect when application loads.
Following is my code for reference.
<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp" ng-controller="PhoneListCtrl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="/assets/img/fav.png">
<title ng-bind-template="Phonecat | {{query}}">Phonecat</title>
<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/angular/angular.min.js"></script>
</head>
<body>
<div>
<span>Search: </span><input ng-model="query" />
</div>
<ul>
<li ng-repeat="phone in phones | filter:query">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
<p>Total number of phones: {{phones.length}}</p>
<script src="/assets/js/app.js"></script>
</body>
</html>
Here, my <title> tag has ng-bind-template directive with query model & pre-defined content,
Phonecat
Now, when page loads document <title> is set to,
Phonecat |
Instead of just "Phonecat".
I don't want ng-bind-template to evaluate & change my document's <title> if query model is EMPTY. If query model is EMPTY, it should just display the initial content (Phonecat in this case) as document's Title & when the query model is updated & NOT EMPTY, it should update the Title (i.e. Phonecat | nexus mobile).
It will be great if someone can explain how to approach this.
Thanks!
You can use the ternary operator inside ng-binding to conditionally build the title:
<title ng-bind="query ? 'Phonecat | ' + query : 'Phonecat'">Phonecat</title>
Alternatively:
<title>{{ query ? 'Phonecat | ' + query : 'Phonecat'}}</title>
I am using an javascript object as model for select menu, and ng-options also have object as the value property. I want the select menu to be pre-selected based on the model value.
My html code,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="myApp" data-ng-controller="MyCtrl as vm">
<select data-ng-model="vm.model" data-ng-options="option as option.studentName for option in vm.options"></select>
<br>
<div>Model : {{vm.model}}</div>
<br>
<div>Options :<br>[ <div data-ng-repeat='option in vm.options'>{{option}}</div></div>
]
</body>
</html>
Script,
// Code goes here
angular.module('myApp',[]);
angular.module('myApp').
controller('MyCtrl',MyCtrl);
function MyCtrl(){
var vm = this;
vm.model = {studentId:1,studentName:'Dheepan'};
vm.options = [{studentId:1,studentName:'Dheepan'},
{studentId:2,studentName:'Raju'}
];
}
Plunker here.
I can understand that since ng-model and option are having different reference, it is not getting selected by default. Is there any way to do it?
You can to use track by to define with field will be finded:
<select data-ng-model="vm.model"
data-ng-options="option as option.studentName for option in vm.options track by option.id"></select>
(your updated jsfiddle: http://embed.plnkr.co/6zNpJA4AsY50bpOQwnLl/preview)
You have to use option.studentId as option.studentName to bind studentId for selected studentName.
here is updated plunker
Try this :
<select data-ng-model="vm.model" data-ng-change="vm.changeStudent(vm.model)" data-ng-options="option.studentId as option.studentName for option in vm.options"></select>
I added ng-change to bind value and display on page.
I'm trying to change a checkbox value based on another checkbox value, but the change doesn't seem to have any effect in the model.
Here is a code example of the issue:
http://plnkr.co/edit/eFOn3cejwKU01LkKNC1s?p=preview
HTML file
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<pre>
A value: {{a}}
B value: {{b}}
</pre>
A <input type="checkbox" ng-model="a" />
B <input type="checkbox" ng-model="b"
ng-disabled="a"
ng-checked="!a && b"
/>
</body>
</html>
And an empty controller:
var app = angular.module('main', [])
.controller('DemoCtrl', function($scope) {
});
As far as I've read, a Dom change doesn't change the model, and when I try to call $apply, the digest is already running, so I'm a bit lost.
I don't want to put a $watch on the first checkbox because my example is already quite complex.
Is there any alternative solution that does not involve writing js code in the controller for this problem?
Please see http://plnkr.co/edit/lbOWO4oLbTghactUETTD?p=preview
You missed reference to script
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
Here is a plunker showing a way to set the b value in the model to false when a is clicked and set to true, without modifying the controller.
http://plnkr.co/edit/rL6tTp5NfBzroZ2zSOgO?p=preview
And here is what I modified to do it - see the ng-change
A <input type="checkbox" ng-model="a" ng-change="b=!a" />
I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
Here is what I tried :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x"
src="http://code.angularjs.org/1.0.7/angular.min.js"
data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selectedOption">
<option value="">-----Select an option-----</option>
<option ng-repeat="option in options" value="{{option.value}}">
{{option.name}}
</option>
</select>
<button ng-click="addOption()">Add option</button>
</body>
</html>
When you add an option, the select switch to a non existant value. It seems like the select value update is resolved before the options update.
Does anyone have any idea on how i could fix that ?
You state: I want to dynamically manage the number of options under a select tag, and automatically select the last added option after updating the options.
You can do this by changing your HTML like so (EDITed after comment):
<option ng-repeat="option in options" value="{{option.value}}" ng-selected="option.value==options.length-1"> {{option.name}}</option>
More information on the ng-selected directive
Line 19 in your accompanying js should also be deleted - this line currently reads like so:
$scope.selectedOption = $scope.options.length - 1;