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"
Related
using Vue.js.
I have two object arrays, category and categoryPar, category contains name and parent's name, categoryPar contains just name. I want to display only categories that belongs to selected parent. Trying to do it like this:
<select v-model="editing.categoryPar"">
<option v-for="cat in categoryPar" v-bind:value="cat.name">{{ cat.description }}</option>
</select>
<select v-model="editing.category">
<option v-for="cat in category" v-if="editing.categoryPar == cat.par_name" v-bind:value="cat.name">{{ cat.description }}</option>
</select>
Condition is fulfilled but not re-rendered. When I use in console vue.$forceUpdate(); then it works, till I change parent select.
Thank you for help.
You need to create a variable of your selected model first.
Currently you are giving your v-model an object, which is why it is not working
new Vue({
el: '#app',
data () {
return {
selectedCategory: '',
category: [{name: 'A', parent: 'Alpha'}, {name: 'B', parent: 'Bravo'}, {name: 'C', parent: 'Charlie'}],
categoryPar: [{name: 'A'}, {name: 'B'}, {name: 'C'}],
}
},
})
<script src="https://unpkg.com/vue#2.5.9/dist/vue.js"></script>
<div id="app">
<pre>Selected Cat: {{selectedCategory}}</pre>
<select name="" id="" v-model='selectedCategory'>
<option :value="cat.name" v-for="cat in category"> {{ cat.name }}</option>
</select>
<select name="" id="">
<option value="" v-for="cat in categoryPar" v-if="cat.name === selectedCategory"> {{ cat.name }}</option>
</select>
</div>
I've spent an hour and tried every conceivable permutation of properties to bind a select to a model as object, and ng-selected does nothing.
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes"
ng-selected="localModel.priceType == item"
ng-value="item"
>{{item.name}}</option>
</select>
or
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes"
ng-selected="localModel.priceType.id == item.id"
ng-value="item"
>{{item.name}}</option>
</select>
or
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes track by item.name"
ng-selected="localModel.priceType.name == item.name"
ng-value="item"
>{{item.name}}</option>
</select>
The select list renders correctly, option values look funky i.e "object:875". and selected does not work.
I need ng-model to be the object, not object.someId.
solved this by using ng-options instead of <option> ng-repat
<select ng-model="localModel.priceType" ng-options="item as item.namefor item in vm.priceTypes track by item.name"></select>
ngValue expects a string for the ngValue. To use ngRepeat with the <option> tag, then use value="{{item}}" instead of ng-value. Expand the snippet below to see it working.
angular.module('myApp', [])
.controller('ctrl', function($scope) {
$scope.vm = {
priceTypes: [{
id: 3,
name: 'pound'
},
{
id: 5,
name: 'Yen'
},
{
id: 6,
name: 'dollar'
}
]
};
//select model value
$scope.localModel = {
priceType: $scope.vm.priceTypes[1]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes as item"
ng-selected="localModel.priceType.id == item.id"
value="{{item}}"
>{{item.name}}</option>
</select>
<div>
priceType: {{ localModel.priceType }}
</div>
</div>
A simpler approach is to use ngOptions on the <select> tag, with a combination of forms:
select as label for value in array track by expr
Refer to the comprehension_expression forms in the Arguments section under Usage for more information.
angular.module('myApp', [])
.controller('ctrl', function($scope) {
$scope.vm = {
priceTypes: [{
id: 3,
name: 'pound'
},
{
id: 5,
name: 'Yen'
},
{
id: 6,
name: 'dollar'
}
]
};
//select model value
$scope.localModel = {
priceType: $scope.vm.priceTypes[1]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="localModel.priceType" ng-options="item as item.name for item in vm.priceTypes track by item.name">
</select>
<div>
priceType: {{ localModel.priceType }}
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngSelected
ngSelected does not interact with the select and ngModel
directives, it only sets the selected attribute on the element. If you
are using ngModel on the select, you should not use ngSelected on the
options, as ngModel will set the select value and selected options.
Try
<select ng-model="localModel.priceType">
<option ng-repeat="item in vm.priceTypes track by item.name"
ng-value="item.name">
{{item.name}}
</option>
</select>
You can change ng-value to any value you want from vm.priceTypes[0].
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.
This works in perfect javascript
document.getElementById("mySelect").selectedIndex = "0"
<select class="selectpicker" id="mySelect">
<option>English </option>
<option>Español </option>
</select>
How do you do this same but in Angularjs
app.controller("BodyController",function($scope){
/****************codeeeeeeeeeeeeeeeeeeeeeeeeee*/
});
One way is to add the ng-model attribute to the select tag, and then set the value of the matching variable in the scope (corresponding to the scope set in the controller). See the example below - bear in mind that value attribute were added to the options. And like tymeJV mentioned, ngOptions would typically be used in an angular application to set the option nodes inside the select tag (see the second example below).
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = 'en';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang">
<option value="en">English </option>
<option value="es">Español </option>
</select>
</div>
Using ngOptions:
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = {name: 'English', id: 'en'};
$scope.langs = [
{name: 'English', id: 'en'},
{name: 'Español', id: 'es'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang" ng-options="lang.name for lang in langs track by lang.id">
</select>
</div>
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