I have my select dropdown and I couldn't select the default value from this dropdown in the controller.
<select ng-model="vm.userdataSet.userList" ng-options="option.value as option.displayName for option in
vm.userOptions">
<option value=""> --- Please select --- </option>
</select>
If you've a similar data structure you can like something this, else provide your data code for more help you or look here: Working with select using AngularJS's ng-options
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.userOptions = ["Apple", "Windows", "Linux"];
$scope.otherUserOptions = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
</script>
<!-- userOptions -->
<select ng-model="vm.userdataSet.userList" ng-options="item for item in userOptions">
<option value=""> --- Please select --- </option>
</select>
<!-- otherUserOptions -->
<select ng-model="vm.userdataSet.userList" ng-options="item as item.name for item in otherUserOptions">
<option value=""> --- Please select --- </option>
</select>
Check below code take reference from this working example:
<div ng-app>
<div ng-controller="DemoSetDefaultCtrl">
<div ng-hide="editorEnabled">
{{title}}
</div>
<div>
<select name="type" ng-model="user" ng-dropdown required ng-options="option.type for option in options">
<option value=""> --- Please select --- </option>
</select>
</div>
</div>
</div>
<script>
function DemoSetDefaultCtrl($scope) {
$scope.title = "Set Default Value";
$scope.options = [
{ type: 'User 1' },
{ type: 'User 2' },
{ type: 'User 3' },
{ type: 'User 4' }
];
$scope.user = $scope.options[1];
}
</script>
Related
Community good day, I have a simple query, I have a combo box with material-select, it works perfectly, but when I want to click on the clean button, I need the combo to select me the first value that is disabled.
<div class="input-field col s12">
<select class="" id="images" ng-model="image" material-select watch>
<option value="" disabled selected>{{translation.fleet6}}</option>
<option ng-repeat="item in fleetImage.data" value="{{item.name}}" data-icon="img/fleets/{{item.name}}" class="left circle">{{item.name}}</option>
</select>
</div>
I thank you in advance
Here you are. Try it like in this demo fiddle by using a simple "cleanUp" function. While the value of your disabled option is empty you can achieve this by reset your ng-model as an empty string. So your disabled option becomes selected.
View
<div ng-controller="MyCtrl">
<select class="" id="images" ng-model="image" material-select watch>
<option value="" disabled selected>{{translation.fleet6}}</option>
<option ng-repeat="item in fleetImage.data"
value="{{item.name}}"
data-icon="img/fleets/{{item.name}}"
class="left circle">{{item.name}}</option>
</select>
<button ng-click="cleanUp()">
Cleanup
</button>
</div>
AngularJS application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.image = '';
$scope.translation = {
fleet6: 'some value disabled'
}
$scope.fleetImage = {
data: [{
name: '1'
},{
name: '2'
},{
name: '3'
},{
name: '4'
},{
name: '5'
}
]}
$scope.cleanUp = function () {
$scope.image = '';
}
});
This should work <button ng-click="image=''">click</button>
I need a tooltip to be displayed for each options in the select box
<select ng-model="rightList" class="form-control" size="13" multiple>
<option
ng-repeat="item in selectedList"
value="{{$index}}"
uib-tooltip="See? Now click away..."
tooltip-placement="right">
{{item.name}}
</option>
</select>
Any help please.
Try the following code:
JS (Data in Controller):
$scope.selectedList = [{
id: 1,
name: 'name1',
toolTip:'tooltip one'
}, {
id: 2,
name: 'name2',
toolTip:'tooltip two'
}, {
id: 3,
name: 'name3',
toolTip:'tooltip three'
}];
HTML:
<select>
<option
data-toggle="tooltip"
data-placement="right"
title="{{item.toolTip}}"
ng-repeat="item in selectedList"
value="{{$index}}">
{{item.name}}
</option>
</select>
Keep the tooltip value in title.
EX:
<select size="5" ng-model="displayTags">
<option ng-repeat="tag in tags | filter:searchTags">
<span title="tag.tagName">{{tag.tagName}}</span> </option>
</select>
html code
<div style="position: absolute" class="container-fluid typeahead-demo" ng-controller="TypeaheadCtrl">
<input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in states | filter:{name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">
<select ng-model="selected_person" ng-options="person.name for person in states | filter: customSelected">
<option value="">Choose a Name</option>
</select>
</div>
angularjs code
var treectrl = angular.module('mapsApp', []);
treectrl = treectrl.controller('TypeaheadCtrl', function ($scope) {
$scope.states = [
{
name: "Alabama",
child: ["Alabama1child", "Alabama2child", "Alabama3child"]
},
{
name: "Alaska",
child: ["Alaska1child", "Alaska2child"]
}
];
});
this is my code and now i don't want to use input type="text"
just want to make dropdown searchable top of dropdown use as a search when click its open with searched word
I have an annoying issue with an app that has an Angular-based frontend. A certain select box is "sticky" - you have to select an option twice to change to it. Here's a snippet which reproduces the issue:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('NewsCtrl', function($scope) {
// Set news data
$scope.news = {
specific_for_dealership: '003'
};
// Get dealers
$scope.dealers = [{
id: 1,
dealerid: '001',
name: 'Volvo'
}, {
id: 2,
dealerid: '002',
name: 'Saab'
}, {
id: 3,
dealerid: '003',
name: 'Seat'
}];
});
</script>
<div ng-app="myapp">
<div ng-controller="NewsCtrl">
<form>
<select name="specific_for_dealership" ng-model="news.specific_for_dealership">
<option value="">All</option>
<option ng-repeat="dealer in dealers" ng-selected="news.specific_for_dealership" value="{{ dealer.dealerid }}">{{ dealer.name }}</option>
</select>
</form>
</div>
</div>
Any idea what has gone wrong and how I might resolve this?
You do not need to use ng-selected to select your option, ng-model does that for you.
It is causing the model to get confused. Which is why you have to select it twice.
<select name="specific_for_dealership" ng-model="news.specific_for_dealership">
<option value="">All</option>
<option ng-repeat="dealer in dealers" value="{{ dealer.dealerid }}">{{ dealer.name }}</option>
</select>
Something else I would personally recommend as well is switching to ng-options to display your options list from the object. It will give you some more versatility. For example you can bind the whole object to the selector instead of just the ID.
<select name="specific_for_dealership"
ng-options="dealer.dealerid as dealer.name for dealer in dealers"
ng-model="news.specific_for_dealership">
<option value="">All</option>
</select>
Just set ng-selected="dealer.dealerid === news.specific_for_dealership"
good day, i created a drop dow menu on AngularJS. but it return to me an object not an item {"deptName":"IT","id":"1"}. i need to return the id only to my table.
is there any thing i need to change on ng-options="item.deptName for item in department.departments"
see the sample:
JS
angular.module('firstApp', [])
.controller('EmpController', function() {
var vm = this;
// define a list of items
vm.employees = [{
name: 'Alex',
id: '2233',
dept: 'IT'
}, {
name: 'Scott',
id: '2244',
dept: 'IT'
}, {
name: 'Joe',
id: '2255',
dept: 'IT'
}];
})
.controller('DeptController', function() {
var vm = this;
vm.departments = [{
deptName: 'IT',
id: '1'
}, {
deptName: 'Finance',
id: '2'
}, {
deptName: 'Marketing',
id: '3'
}];
});
HTML
<div class="jumbotron">
<h1>The Selected is </h1>
<h2>{{main.employeeData.dept}}</h2>
<!-- form to add computer to the list -->
<form class="form-inline" ng-controller="DeptController as department">
<div class="form-group">
<label class="col-sm-2 control-label">Dept menu</label>
<div class="col-sm-6">
<!--<select required="true" ng-model="main.employeeData.dept" ng-options="item.deptName for item in department.departments">-->
<!--<option value="">Select Category</option>-->
<!--</select>-->
<select required="true" ng-model="main.employeeData.dept" ng-options="item.id as item.deptName for item in department.departments">
<option value="">Select Category</option>
</select>
</div>
</div>
</form>
</div>
</div>
You need to use as of ng-options like item.id as item.deptName .It will show item.deptName on drop-down value & assign item.id value to the respective select ng-model
Markup
<select required="true" ng-model="main.employeeData.dept" ng-options="item.id as item.deptName for item in department.departments">
<option value="">Select Category</option>
</select>
Working Plunkr here