We Keep Coding

AngularJS : Not able to select the default dropdown value

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>

Vue.js dont re-render after select element change

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>

How do i bind select box with input in vuejs?

I try to bind select box with input so I have a select box with pre defined options and when selected that option will be in the input and when the user types text in the input a dynamic new select option should be made if it is not in the pre defined list else it should match on one of the items.
<div class="col-md-2 text-center">
<select class="form-control" v-model="selected">
<option v-for="item in inventory" :value="item" :key="item.id">
#{{ item.name }}
</option>
</select>
<p>
#{{ selected.id}}
</p>
</div>
<input v-model="inputBind" placeholder="," type="text" class="form-control">
and
new Vue({
el:'#app',
data:{
inputBind:'',
inventory: [
{name: 'MacBook Air', id: 1},
{name: 'MacBook Pro', id: 2},
{name: 'Lenovo W530', id: 3},
{name: 'Acer Aspire One', id: 4}
],
selected: 2
},
created: function() {
this.selected = this.inventory.find(i => i.id === this.selected);
},

Use the the same data attr for the input, check js fiddle that way data is shared by both the inputs. Its is the easiest way. Note that for the select box to select the correct option now you must enter the matching value. Don't know what the reason is you need it this way but its not that user friendly.
Js
new Vue({
el: '#app',
data: {
selected: 'item1',
input: '',
items: {
1: {id: 1, val: 'item1'},
2: {id: 2, val: 'item2'},
3: {id: 3, val: 'item3'},
}
}
});
Html
<div id="app">
<select class="form-control" v-model="selected">
<option v-for="item in items" :value="item.val" :key="item.id">
{{ item.val }}
</option>
</select>
<p>
{{ selected }}
</p>
<input v-model="selected" placeholder="," type="text" />
</div>

You can bind to change and which is fired after the model value has been updated like so:
<select class="form-control" v-model="selected" #change="doSomethingWithChangedValue">
<option v-for="item in inventory" :value="item" :key="item.id">
#{{ item.name }}
</option>
</select>

"Sticky" select in Angular app

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"

what is best practice for Angular drop down menu & ng-option

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