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>
Related
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>
I can't get a placeholder idea with select. With the below the first entry is still blank.
<select class="form-control" ng-model="refData" required>
<option ng-repeat="d in refData">
{{d.value}}
</option>
<option value="" disabled hidden selected>View current values</option>
</select>
You can use transclusion to add an extra option that is disabled and selected. See How do I make a placeholder for a 'select' box? for more background on that general solution. Here is the ngSelect documentation for reference, as well.
View
<div ng-controller="MyCtrl">
<select name="mySelect"
id="mySelect"
ng-options="option.name for option in refData track by option.id"
ng-model="selectedOption">
<option value="" disabled selected>View current values</option>
</select>
</div>
AngularJS application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.refData = [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
];
$scope.selectedOption = "";
});
JsFiddle Demo
<select ng-model="testData" ng-options="test.name for test in testData">
<option value="" selected>View current values</option>
</select>
Given test data is:
$scope.testData = [{"name" : "John"}, {"name" : "Micheal"}, {"name" : "Sarah"}];
I suggest using ng-options
<select ng-options="d as d.value for d in refData" ng-model="refDataSelected"></select>
On your controller you can declare
$scope.refDataSelected = refData[0]
to use first element as default option
If you want to create a dummy text you can add a new object to refData with custom text and give it an unreal id like -1. But when you submit you should check whether its id is -1 or not.
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
In Angular, how do you display the content/text of an option in a select list? For example, you have {{ data.singleSelect }} that displays the value of an option, but how do you use it to display the content/text of that option instead?
Code on Plunker - http://plnkr.co/edit/cCAHfWL275EZTZt9epUR?p=preview :
<body ng-app="staticSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" ng-model="data.singleSelect">
<option value="option-1">Thing 1</option>
<option value="option-2">Thing 2</option>
</select><br>
<tt>singleSelect = {{data.singleSelect}}</tt>
<p>Update above so 'Thing 1' or 'Thing 2' displayed instead of 'option-1' or 'option-2'</p>
</form>
</div>
</body>
I want to keep the markup of options in in the HTML. (If this against Angular best practices, please let me know). And want to keep values on the option so they can be used as filters.
In controller
$scope.options = [
{
name: "Thing 1",
value: "option-1"
},
{
name: "Thing 2",
value: "option-2"
}
];
HTML
<select ng-model="data.singleSelect" ng-options="option as option.name for option in options"/>
Your value
{{data.singleSelect.name}}
Inside your controller
$scope.allData = {
'option-1': 'Thing 1',
'option-2': 'Thing 2'
}
inside your HTML
<tt>singleSelect = {{allData[data.singleSelect]}}</tt>
You can just omit the value attribute of option tag.
<body ng-app="staticSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" ng-model="data.singleSelect">
<option>Thing 1</option>
<option>Thing 2</option>
</select><br>
<tt>singleSelect = {{data.singleSelect}}</tt>
<p>Update above so 'Thing 1' or 'Thing 2' displayed instead of 'option-1' or 'option-2'</p>
</form>
</div>
</body>
Yet another variant: dynamically create select like this:
<select name="singleSelect" ng-init="ops=[{v:'option-1', l:'thing 1'},{v:'option-2', l:'thing 2'}]" ng-options="o.l for o in ops" ng-model="data.singleSelect">
</select>
Plunkr
You could use ng options in an angular js way.
Here is the plunker
http://plnkr.co/edit/pGqzwhvkOO0iXYvmdlOj?p=preview
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"