I am having a select tag as
<select ng-model="vm.fooModel"
ng-options="item.id as item.name for item in vm.fooOptions" >
<option value="none">Select</option>
</select>
The issue is that when this is getting rendered angular 1.6 is removing my default option and adding an empty option
<option value="?" selected="selected"></option>
My initial model value for "vm.fooModel" is "none" . ̶T̶h̶i̶s̶ ̶w̶a̶s̶ ̶w̶o̶r̶k̶i̶n̶g̶ ̶f̶i̶n̶e̶ ̶i̶n̶ ̶a̶n̶g̶u̶l̶a̶r̶ ̶1̶.̶5̶
Use the ng-repeat method for <select> options:
angular.module("app",[])
.controller("ctrl", function(){
var vm = this;
vm.fooModel="none";
vm.fooOptions=[
{id: 1, name:"one"},
{id: 2, name:"two"},
];
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
<select ng-model="vm.fooModel">
<option value="none" disabled>Select</option>
<option ng-repeat="item in vm.fooOptions" ng-value="item.id">
{{item.name}}
</option>
</select>
value={{vm.fooModel}}
</body>
For more information, see AngularJS <select> Directive API Reference - Using ngRepeat to generate select options.
Add default option to array of options in controller.
angular.module("app", [])
.controller("ctrl", function() {
var vm = this;
vm.fooModel = "none";
vm.fooOptions = [{
id: "none",
name: "default"
},
{
id: 1,
name: "one"
},
{
id: 2,
name: "two"
},
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
<select ng-model="vm.fooModel" ng-options="item.id as item.name for item in vm.fooOptions">
</select>
Select: {{vm.fooModel}}
</body>
<option ng-repeat="item in vm.fooOptions track by item.id" ng-value="item.id">
make use of track by in ng-repeat
Related
So there is a dropdown selector which must be set on the default option and be able to reset to it if reset button is clicked.
I managed to do it with jQuery, I'm wondering how can it be done using AngularJS
$('#buttonID').click(function(){
$('#selectId').val('0');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectId">
<option value="0">first option</option>
<option value="1">second option</option>
<option value="2">third option</option>
</select>
<input type="button" id="buttonID" value="reset"/>
Any suggestions?
You need to have a collection of options and a model bound to the select box. On reset, you just need to change the value of bound model to what you want:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.opt = 0;
$scope.options = [{
value: 0,
label: 'first option'
}, {
value: 1,
label: 'second option'
}, {
value: 2,
label: 'third option'
}];
$scope.reset = function() {
$scope.opt = 0;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select id="selectId" ng-options="opt.value as opt.label for opt in options" ng-model="opt">
</select>
<input type="button" id="buttonID" value="reset" ng-click="reset()"/>
</div>
I have a select in AngularJS like:
<select class="browser-default" ng-model="newParticipantFormData.groupId" ng-options="item as item.name for item in newParticipantFormData.availableGroups.results track by item.id">
</select>
I hope that when the user selects a value in the "select" I get the value in newParticipantFormData.groupId, but I'm getting:[object%20Object], why?
In the console I can see the values, like you can see as follows:
<option value="?" selected="selected" label=""></option>
<option value="1819" label="Grupo 147258">Grupo 147258</option>
<option value="1820" label="Grupo 258369">Grupo 258369</option>
If you want to pass the item id on select the option try this :
ng-options="item.id as item.name for item in newParticipantFormData.availableGroups.results"
instead of
ng-options="item as item.name for item in newParticipantFormData.availableGroups.results"
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.newParticipantFormData = {
"availableGroups" : { "results" : [
{
"id": 1819,
"name": "Grupo 147258"
},
{
"id": 1820,
"name": "Grupo 258369"
}
]}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select class="browser-default" ng-model="newParticipantFormData.groupId" ng-options="item.id as item.name for item in newParticipantFormData.availableGroups.results"></select>
{{newParticipantFormData.groupId}}
</div>
Try this
<select class="browser-default" ng-model="newParticipantFormData.groupId">
<option ng-repeat="participant in newParticipantFormData.availableGroups.results" value="{{$index}}">{{participant}}</option>
</select>
The value shouldn't be the index, it can be anything that you need.
I think you need to change the ng-options as following
ng-options="item.id as item.name for item in newParticipantFormData.availableGroups.results track by item.id"
Hello I have tried implementing the changes provided in several examples yet none seem to work. I do have an ng-model and I clearly define the property of the object I would to receive. However it still does not work.
Any help would be great.
HTML
<select chose ng-model="selected" ng-options="type as type.Name for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
Controller
$scope.selected = ansExplanOpt.data;
The object is populating (I checked) and the properties it has are Name and Id.
Any help would be great. Thanks
You were very close. Just looks like a misuse of the ng-model value. Your code should be something like
<select chose ng-model="selectedValue" ng-options="type.Id as type.Name for type in ansExplanOpt">
</select>
And the ng-model will be what the user has selected.
Their documentation breaks it down well also:https://docs.angularjs.org/api/ng/directive/ngOptions
Here is solution:
ng-model is the value that user selected.
function TodoCtrl($scope) {
$scope.ansExplanOpt = [
{text:'learn angular', id:1},
{text:'build an angular app', id:2}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<select chose ng-model="select" ng-options="type as type.text for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
{{select.text}}
<br>
{{select}}
</div>
</div>
You can define which element in the array you want to be preselected:
var myApp = angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.data = [{
label: 'blah',
value: 'blah'
}, {
label: 'blah1',
value: 'blah1'
}, {
label: 'blah2',
value: 'blah2'
}];
$scope.sel = $scope.data[0];
}]);
html:
<div ng-controller="TestController">
{{sel}}
<select ng-model="sel.value" ng-options="d.value as d.label for d in data">
</select>
</div>
See jsfiddle for more details
I am creating a web app in which i am using dropdown and angularjs for updating my database,
this is my syntax of my dropdownlist
<select ng-model="ucomname" ng-change="uucomname(o)">
<option ng-repeat="o in comnamelistfun" value="{{o.comname}}">{{o.comname}}</option>
</select>
first value in this dropdown is coming blank but i want the first value of my dropdown to be the first value of my dropdown, when i used ng-init i am not able to send the value in ng-model any idea?
You can use this.
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
(function() {
'use strict';
angular
.module('app', [])
.controller('HomeCtrl', HomeCtrl);
HomeCtrl.$inject = ['$scope'];
function HomeCtrl($scope) {
$scope.cities = [
{ id: 1, name: 'London' },
{ id: 2, name: 'Chicago' },
{ id: 3, name: 'Moscow' },
{ id: 4, name: 'Mumbai' },
{ id: 5, name: 'Casablanca' }
];
// Pre-select city by id
$scope.selectedCityId = 1;
// Pre-select city by object
$scope.selectedCity = { id: 1, name: 'Casablanca' };
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="HomeCtrl">
<h3>Data List</h3>
<table>
<tbody>
<tr ng-repeat="city in cities">
<td>{{city.id}}</td>
<td>{{city.name}}</td>
</tr>
</tbody>
</table>
<h3>Selected City (by Id)</h3>
selectedCityId: <strong>{{selectedCityId}}</strong>
<br/>
<br/>
<label>Select City
<select ng-model="selectedCityId" ng-options="city.id as city.name for city in cities">
<option value="">-- Select City --</option>
</select>
</label>
<hr/>
<h3>Selected City (by object)</h3>
selectedCity: <strong>{{selectedCity}}</strong>
<br/>
<br/>
<label>Select City
<select ng-model="selectedCity" ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
</label>
<hr/>
<!-- Scripts -->
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="HomeCtrl.js"></script>
</body>
</html>
First in your Controller,
app.controller('cardController', ['$scope',
function($scope) {
$scope.ucomname = $scope.comnamelistfun[0]
}])
Then the select box is,
<select ng-model="ucomname" ng-change="uucomname(o)" ng-options="o for o in comnamelistfun">
</select>
This shld work for you.
Try this code.
<select ng-model="ucomname" ng-options= "o.comname for o in comnamelistfun track by o.comname">
</select>
and in your controller. Put this.
$scope.ucomname = $scope.comnamelistfun[0]; //This will select the first element.
I hope it should work :)
I'm having trouble using AngularJS to filter a json object into a select form element. Here's what I've got so far. I'm stumped, any help would be appreciated.
app.js:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.showItems = null;
$scope.items = [
{ id: '023', name: 'foo' },
{ id: '033', name: 'bar' },
{ id: '010', name: 'blah' }];
});
singlepageapp.html:
<html data-ng-app="app">
<body data-ng-controller="MainCtrl">
<form>
<select data-ng-model="showItems" data-ng-options="item as item.name for item in items"></select>
</form>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
current result:
<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">foo</option>
<option value="1">bar</option>
<option value="2">blah</option>
</select>
desired result:
<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="023">foo</option>
<option value="033">bar</option>
<option value="010">blah</option>
</select>
You can always just repeat over options in the html and not use data-ng-options. I've made a fiddle that does what you want: http://jsfiddle.net/5MQ9L/
<select ng-model="selected">
<option value="{{item.id}}" ng-repeat="(i,item) in items"> {{item.name}}
</option>
</select>
This way you can set the values directly with scoped vals.
Hope this helped!
You should have specified the item.id
<select ng-model="selected" ng-options='item.id as item.name for item in items'> </select>
From http://docs.angularjs.org/api/ng/directive/select
Note: ngOptions provides an iterator facility for the element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.
I updated the jsFiddle
http://jsfiddle.net/5MQ9L/1/