Change dropdown into searchable dropdown in angular js - javascript

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

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>

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>

Filter table column angular js based on drop down

<form class="col2">
<label for="filter-online">
Filter by Online
</label>
<div class="select">
<select id="filter-online" ng-model="vm.online" class="form-control" ng-options="online for online in vm.onlines">
<option value="">All</option>
</select>
</div>
</form>
<form class="col2">
<label for="filter-productType">
Filter by Product Type
</label>
<div class="select">
<select id="filter-productType" ng-model="vm.productType" class="form-control" ng-options="productType for productType in vm.productTypes">
<option value="">All</option>
</select>
</div>
</form>
<tr ng-repeat="lim in vm.stockLimits track by lim.id">
<td>{{lim.online}}</td>
<td>{{lim.producttype}}</td>
</tr>
vm.stockLimits values below:
ONLINE PRODUCT TYPE
Men Shirt
Men Shoe
Ladies Top
Kids belt
Kids
..........
..........
Based on drop down (filter_online select & filter_productType select), need to filter data in the table.
Is it possible to write one custom filter javascript function in angular script file which can be used to filter both online & product type based on drop down selection? It would be great if you show me the ideas of doing it.
I added a custom filter on your ng-repeat in such a way that it can filter out selected values dynamically from the dropdown selection.
Here's the ng-repeat:
ng-repeat="lim in vm.stockLimits | filter:{
online:vm.online && vm.online !== '' ? vm.online : '',
productType: vm.productType && vm.productType !== '' ? vm.productType : ''
}"
Find working code snippet below!
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
var vm = this;
vm.onlines = ["Men", "Kids", "Ladies"];
vm.productTypes = ["Shirt", "Shoe", "Top"];
vm.stockLimits = [{
id: 1,
online: "Men",
productType: "Shirt"
}, {
id: 2,
online: "Men",
productType: "Shoe"
}, {
id: 3,
online: "Kids",
productType: "Belt"
}, {
id: 4,
online: "Ladies",
productType: "Top"
}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<form class="col2">
<label for="filter-online">
Filter by Online
</label>
<div class="select">
<select id="filter-online" ng-model="vm.online" class="form-control" ng-options="online for online in vm.onlines">
<option value="">All</option>
</select>
</div>
</form>
<form class="col2">
<label for="filter-productType">
Filter by Product Type
</label>
<div class="select">
<select id="filter-productType" ng-model="vm.productType" class="form-control" ng-options="productType for productType in vm.productTypes">
<option value="">All</option>
</select>
</div>
</form>
<table style="margin-top: 30px">
<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online && vm.online !== '' ? vm.online : '', productType: vm.productType && vm.productType !== '' ? vm.productType : ''}">
<td>{{lim.online}}</td>
<td>{{lim.productType}}</td>
</tr>
</table>
</div>
In AngularJS you can stack as many filters on an array as you would like on an array.
Try doing something like this:
HTML:
<select ng-model="vm.online" ng-options="online for online in vm.onlines" ng-change="vm.filterChanged()">
<option value="">All</option>
</select>
<select ng-model="vm.productType" ng-options="productType for productType in vm.productTypes" ng-change="vm.filterChanged()">
<option value="">All</option>
</select>
<tr ng-repeat="lim in vm.filteredStockLimits = vm.stockLimits | filterByOnline:vm.online
| filterByProductType:vm.productType track by lim.id">
JS (Controller):
var filterChanged = function() {
var filtered = $filter('filterByOnline')(vm.stockLimits, vm.online);
vm.filteredStockLimits = $filter('filterByProductType')(filtered, vm.productType);
}
In your controller you read the data into your initial vm.stockLimits array which gets filtered into vm.filteredStockLimits when either select box is changed. Note, you will have to add two custom filters (filterByOnline and filterByProductType) to filter the array by the online and product type. For that you can reference the AngularJS docs: AngularJS Custom Filters
You can use ng-show or ng-if to filter data.
no need to create a custom filter.
something like this.
<tr ng-repeat="lim in vm.stockLimits" ng-show="lim.productType==vm.productType && lim.online==vm.online">
<td>{{lim.online}}</td>
<td>{{lim.productType}}</td>
</tr>
see full workin fiddle here
http://jsfiddle.net/SNF9x/315/
Better you can use npm package of filter;
install it:- npm i ng2-search-filter
import this to module.ts
import { Ng2SearchPipeModule } from 'ng2-search-filter';
in html : *ngFor="let dealerdata of Dealer_data|filter:Status|filter:Range"

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

AngularJS Dropdown required validation

Following is my code snippet. I want to validate my dropdown using angular.
<td align="left" width="52%">
<span class="requiredSmall">*</span>
<select class="Sitedropdown" style="width: 220px;"
ng-model="selectedSpecimen().serviceID"
ng-options="service.ServiceID as service.ServiceName for service in services">
<option value="" ng-selected="selected">Select Service</option>
</select>
</td>
Valid means:
Valid values can be anything but "Select Service", it is my default value. Like other ASP.net Require field validator DefaultValue="0" for dropdown, so here My dropdown will be bound from the services and I want to select all other values except "Select Service".
You need to add a name attribute to your dropdown list, then you need to add a required attribute, and then you can reference the error using myForm.[input name].$error.required:
HTML:
<form name="myForm" ng-controller="Ctrl" ng-submit="save(myForm)" novalidate>
<input type="text" name="txtServiceName" ng-model="ServiceName" required>
<span ng-show="myForm.txtServiceName.$error.required">Enter Service Name</span>
<br/>
<select name="service_id" class="Sitedropdown" style="width: 220px;"
ng-model="ServiceID"
ng-options="service.ServiceID as service.ServiceName for service in services"
required>
<option value="">Select Service</option>
</select>
<span ng-show="myForm.service_id.$error.required">Select service</span>
</form>
Controller:
function Ctrl($scope) {
$scope.services = [
{ServiceID: 1, ServiceName: 'Service1'},
{ServiceID: 2, ServiceName: 'Service2'},
{ServiceID: 3, ServiceName: 'Service3'}
];
$scope.save = function(myForm) {
console.log('Selected Value: '+ myForm.service_id.$modelValue);
alert('Data Saved! without validate');
};
}
Here's a working plunker.

Categories