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

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

Related

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>

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>

AngularJS: How to select an material-select item/option in selection

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>

Bootstrap tooltip on Select option not working

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>

AngularJS- How to populate second select on selection of option from first select?

I am new to AngularJS. In my application i have two <select>. The second select has to be dependent on the value selected from first select selected.
Following is my controller data:
$scope.types=[{type:"Cars"},{type:"Bykes"}];
$scope.Cars= [{"id":1,"CarName":"Hundai"},{"id":2,"CarName":"Maruti"},{"id":3,"CarName":"Toyoto",}];
$scope.Bykes= [{"id":10,"BykeName":"Honda"},{"id":8,"BykeName":"Bajaj"},{"id":9,"BykeName":"TVS"}];
Following is My HTML:
<div class="col-lg-2 top10">
<select class="form-control select1" ng-model="selectedType" ng-init="selectedType='Cars'">
<option ng-repeat="type in types">{{type.type}}</option>
</select>
</div>
<div class="col-lg-3">
<select ng-model="vehicle" class="form-control select2" >
<option ng-repeat="car in Cars" value="{{car}}">{{car.CarName}}</option>
</select>
</div>
Actually My Cars and Bykes data comes from database.
Now as if i select cars from first select , accordingly only cars should be displayed in the second select and if i select Bykes only Bykes should be displayed in second select.
Please help me on this.Thanx in advance.
Here is what you could do, without modifying many things in your code.
you could make use of ng-if to check on the selected vehicle type and display the corresponding dropdown accordingly.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.types = [{
type: "Cars"
}, {
type: "Bykes"
}];
$scope.Cars = [{
"id": 1,
"CarName": "Hundai"
}, {
"id": 2,
"CarName": "Maruti"
}, {
"id": 3,
"CarName": "Toyoto",
}];
$scope.Bykes = [{
"id": 10,
"BykeName": "Honda"
}, {
"id": 8,
"BykeName": "Bajaj"
}, {
"id": 9,
"BykeName": "TVS"
}];
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController as vm">
<div class="col-lg-2 top10">
<select class="form-control select1" ng-model="vm.selectedType" ng-init="vm.selectedType='Cars'">
<option ng-repeat="type in types">{{type.type}}</option>
</select>
</div>
<div class="col-lg-3" ng-if="vm.selectedType=='Cars'">
<select ng-model="vehicle" class="form-control select2">
<option ng-repeat="car in Cars" value="{{car}}">{{car.CarName}}</option>
</select>
</div>
<div class="col-lg-3" ng-if="vm.selectedType=='Bykes'">
<select ng-model="vehicle" class="form-control select2">
<option ng-repeat="byke in Bykes" value="{{byke}}">{{byke.BykeName}}</option>
</select>
</div>
<span>
</span>
</div>
</div>
Here the answer
Here
populate second select based on select of option from first select

Categories