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>
Related
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
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 using AngularJS. There are two select, the first is the "team select," the second is the "member select." If the "team select" have the members, the "member select" show " select the member ." If the "team select" don't have the members, the 'member select" show "no member."
My problem is how to change the default option of the "member select".
This is my code:
<script src="angular.js"></script>
<div class="bigDiv">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option ng-show="!have_member" value="" disabled selected hidden>no member</option>
<option ng-show="have_member" value="" disabled selected hidden>select a member</option>\
</select>
</div>
<script src="angular.js"></script>
<script>
angular.module('app',[]).controller('xxx',['$scope', function ($scope) {
$scope.have_member = false;
$scope.team_array = [
{teamname: "team1", members:[ {name:'team1member1'}, {name:'team1member2'}]},
{teamname: "team2", members:[ {name:'team2member1'}, {name:'team2member2'}]},
{teamname: "team3", members:[]},
];
$scope.selectMemberFun = function (team) {
if(team.members.length == 0){
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}])
</script>
Why does the 'ng-show' directive not work ? The "member select" always shows "no member".
I've tried a few ways, looks like this one works.
angular.module('app', []).controller('TestController', ['$scope',
function($scope) {
$scope.have_member = false;
$scope.team_array = [{
teamname: "team1",
members: [{ name: 'team1member1' }, { name: 'team1member2' }]
}, {
teamname: "team2",
members: [{ name: 'team2member1' }, { name: 'team2member2' }]
}, {
teamname: "team3",
members: []
}, ];
$scope.selectMemberFun = function(team) {
if (team.members.length == 0) {
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="bigDiv" ng-app="app" ng-controller="TestController">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option value="" disabled selected hidden>{{have_member ? 'select a member' : 'no member'}}</option>
</select>
</div>
According to the documentation -> https://docs.angularjs.org/api/ng/directive/select
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
<option value="option-2">Option 2</option>
</select>
It doesn't work because ngOptions is like ngReapeat in that it will ONLY iterate when there are values in the select_team.members array. In Team3 the member array is empty, so all the inner <option></option> are skipped.
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 have taken a select list with multiple option using ng-options. I am using it as below:
<select ng-options="c as c.Text for c in ReceiverList track by c.Value" ng-model="ReceiverUserID" class="form-control" id="ddlReceiverUserID" ng-change="GetWorkers(ReceiverUserID, SenderUserID,'receiver')">
<option value="">--Select Supervisor--</option>
</select> <!-- Parent Drop Down-->
<select multiple ng-options="c as c.Text group by c.Group
for c in receiveList track by c.Value" ng-model="Workers"
class="form-control" id="ddlWorkers" size="10">
</select> <!-- Child Drop Down -->
This select dropdown get filled when I select some item from another dropdown.(It's a kind of cascaded dropdown). Filling it like below:
$scope.GetWorkers = function (objA, objB, ddlType) {
$http.post("user/Workers/", { userID: objA.Value })
.success(function (data, status, headers, config) {
if (ddlType == 'sender') {
$scope.sendList = data;
} else {
$scope.receiveList = data;
$('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true); // Not working
}
})
.error(function (data, status, headers, config) {
showToast(ToastType.error, "Error occured while fetching workers.", "Failure");
});
}
I want to disable child dropdown's specific group items. So I tried below code but it is not working:
$('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true);
I don't know how do I disable specific group items of select whenever its data changes or new data loaded.
Here is HTML output in which I want to disable all optgroup[label="Current Users"] members:
<select multiple="" ng-options="c as c.Text group by c.Group for c in receiveList track by c.Value" ng-model="Workers" class="form-control ng-pristine ng-valid" id="ddlWorkers" size="10">
<optgroup label="Current Users">
<option value="4118">Kevins Numen</option>
<option value="4119">ggdfg fdgdfg</option>
</optgroup>
<optgroup label="New Users">
<option value="1093">Case Worker</option>
</optgroup>
</select>
I don't know much about angularjs or ng-options, but it seems that everybody else used some timeout to let the process populate the received data to the input, and you can try something this like others:
...
} else {
$scope.receiveList = data;
setTimeout(function(){
$('#ddlWorkers optgroup[label="Current Users"] option')
.prop('disabled', true); // Not working
}, 100);
}
...
maybe not similar but good to have a look here:
is there a post render callback for Angular JS directive?
You need to customize your code and also JSON Object
<div ng-controller="AjaxCtrl">
<h1>AJAX - Oriented</h1>
<div>
Country:
<select id="country" ng-model="country" ng-options="country for country in countries">
<option value=''>Select</option>
</select>
</div>
<div>
City: <select id="city" ng-disabled="!cities" ng-model="city"><option value='' ng-repeat="item in cities" ng-disabled="item.disabled">{{item.name}}</option></select>
</div>
<div>
Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value='' ng-disabled="item.disabled" ></option></select>
</div>
</div>
Your Angular
function AjaxCtrl($scope) {
$scope.countries = ['usa', 'canada', 'mexico', 'france'];
$scope.$watch('country', function(newVal) {
if (newVal)
$scope.cities = [
{ id: 1, name: '11111'},
{ id: 2, name: '22222', disabled: true },
{ id: 3, name: '33333', disabled: true }
]
});
$scope.$watch('city', function(newVal) {
if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
});
}
function AjaxCtrl($scope) {
$scope.countries = ['usa', 'canada', 'mexico', 'france'];
$scope.$watch('country', function(newVal) {
if (newVal)
$scope.cities = [
{ id: 1, name: '11111'},
{ id: 2, name: '22222', disabled: true },
{ id: 3, name: '33333', disabled: true }
]
});
$scope.$watch('city', function(newVal) {
if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
});
}
<link href="http://fiddle.jshell.net/css/normalize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<div ng-controller="AjaxCtrl" class="ng-scope">
<h1>AJAX - Oriented</h1>
<div>
Country:
<select id="country" ng-model="country" ng-options="country for country in countries" class="ng-valid ng-dirty"><option value="" class="">Select</option><option value="0">usa</option><option value="1">canada</option><option value="2">mexico</option><option value="3">france</option></select>
</div>
<div>
City: <select id="city" ng-disabled="!cities" ng-model="city" class="ng-valid ng-dirty"><!-- ngRepeat: item in cities --><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding">11111</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">22222</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">33333</option></select>
</div>
<div>
Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs" class="ng-pristine ng-valid" disabled="disabled"><option value="" ng-disabled="item.disabled" class=""></option></select>
</div>
</div>
Reference