https://github.com/angular-ui/ui-select
This search plugin finds a match using 'LIKE %word%'. Possible to change it to 'LIKE word%'
Example: If I type letter 'T' when searching states, currenty it returns following:
HI
ID
IL
IN
IA
MI
RI
...
I'd like it to return:
ID
IL
IN
IA
You can achieve this functionality by using angular's custom filter.
Something like:
app.filter('propsFilter', function() {
return function(items, props) {
var out = [];
if (angular.isArray(items)) {
items.forEach(function(item) {
var keys = Object.keys(props);
var prop = keys[0];
var text = props[prop].toLowerCase();
if (item[prop].toString().toLowerCase().indexOf(text) === 0) {
out.push(item);
}
});
} else {
out = items;
}
return out;
};
});
and pass this filter into out select2 declaration:
<ui-select ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in people | propsFilter: {name:$select.search}">
<div ng-bind-html="item.name | highlight: $select.search"></div>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
Here is the plunkr link you can refer:
Related
When I change selection in dropdown ng-change is not fired
Following are my html and js code
<ui-select ng-model="DemandLine.SupplierId" theme="select2" ng-change="GetSupplierInfo()">
<ui-select-match allow-clear="true" placeholder="Select or search supplier in the list...">{{$select.selected.SupplierName}}</ui-select-match>
<ui-select-choices repeat="supplier.Id as supplier in (Suppliers | filter: $select.search)">
<span ng-bind-html="supplier.SupplierName | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
$scope.GetSupplierInfo = function () {
var _supplier = _.find($scope.Suppliers, function (data) { return (data.Id == $scope.DemandLine.SupplierId) });
if (_supplier != undefined && _supplier != null && _supplier.Active == true) {
$scope.DemandLine.SupplierId = _supplier.Id;
$scope.DemandLine.Supplier = _supplier.SupplierName;
}
else {
$scope.DemandLine.SupplierId = null;
$scope.DemandLine.Supplier = null;
}
$scope.setStatus();
}
You should use on-select instead of ng-change which is an angular directive
<ui-select ng-model="DemandLine.SupplierId" theme="select2" on-select="GetSupplierInfo()">
I am trying to disable options in a ui-select using a function in the ui-disable-choice. Calling a function doesn't seem to work. Any ideas on what I am doing wrong?
UI-Select
<ui-select
id="affSel--{{seat.sli_no}}"
class="affSel"
perf-no ="{{seat.perf_no}}"
sli-no="{{seat.sli_no}}"
ng-required="true"
theme="bootstrap"
on-select="changedAffiliate(mySeat.seat.sli_no, cartPerf.perf_no, seat.sli_no,seat)">
<ui-select-match placeholder="-- Select person --">{{$select.selected.fname + ' ' + $select.selected.lname}}</ui-select-match>
<ui-select-choices repeat="affiliate in affiliates | seatAffTypeFilter:seat.seatAff"
ui-disable-choice="checkDisable(affiliate.customer_no,cartPerf.perf_no, seat.sli_no)">
<div ng-bind-html="affiliate.fname + ' ' + affiliate.lname"></div>
<small ng-show="affiliate.disabled">{{AffSelected}}</small>
<small ng-show="affiliate.validation_pass_age == 'N'">{{invalidAffLbl}}</small>
</ui-select-choices>
</ui-select>
Function
$scope.checkDisable = function (customer_no, cur_perf_no, cur_sli_no) {
$.each($scope.selectedAff, function (i) {
if (this.customer_no == customer_no && this.perfNo == cur_perf_no && this.sli_no != cur_sli_no) {
return true;
} else {
return false;
}
})
}
try
$scope.checkDisable = function (customer_no, cur_perf_no, cur_sli_no) {
return false; //true;
}
if this does not work it would mean that function types are not supported, but if it works, then you have code issue...
mostly you are not capturing result of $.each function, from the context it seems you need _.find rather than $.each
I have array of objects that holds two properties(title, params). When I apply following filter all values are searched for match.
The problem is that type.title value is not translated and I need to filter out array items which translated title property matches with the $select.search value
<ui-select-choices repeat="type in codeLists.reportTypes | filter: $select.search">
You have two options for this:
1) Pre-translate all titles
$scope.cldeLists.reportTypes.forEach(function(item) {
item.translatedTitle = $filter("translate")("docKey." + item.title);
});
Then you can use it in your filter:
<ui-select-choices repeat="type in codeLists.reportTypes | filter: { translatedTitle: $select.search }">
2) Create a custom filter which searches the translated item:
app.filter("translatedPropertyFilter", function($filter) {
return function(item, property, searchString, prefix) {
if (!prefix) prefix = "";
return $filter("translate")(prefix + item[property]).indexOf(searchString) > -1;
}
});
Usage:
<ui-select-choices repeat="type in codeLists.reportTypes | translatedPropertyFilter:'title':$select.search:'docKey.'">
My question
Please how to get subcategories of specific category selected ?
Here I can retrieve all data but not filtered by categories.
Thanks
Json Data
"data": [
{
"id": 1,
"famille": "subcat1",
"catproduit_id": 2,
"catproduit": {
"id": 2,
"cat": "cat2",
}
},
{
"id": 2,
"famille": "subcat2",
"catproduit_id": 2,
"catproduit": {
"id": 2,
"cat": "cat2",
}
},
{
"id": 3,
"famille": "subcat3",
"catproduit_id": 1,
"catproduit": {
"id": 1,
"cat": "cat1",
}
},
}
]
Controller
"use strict";
var app = angular.module('bb-laravel',['ui.select']);
app.controller('RapportCreateCtrl',function($scope,SweetAlert,RapportService,CatproduitService,FamproduitService,$http,$rootScope,$translatePartialLoader,Notification,trans){
/*
* Define initial value
*/
$scope.tmp = {};
$scope.rapport={};
/*
* Create a rapport
*/
$scope.create = function(rapport) {
$scope.isDisabled = true;
$scope.tmp = angular.isObject(rapport) ? angular.toJson(rapport) : rapport;
RapportService.create($scope.tmp);
};
/*
* Get all Catproduit
*/
CatproduitService.list().then(function(data){
$scope.catproduits = data;
});
/*
* Get all Famproduit
*/
FamproduitService.list().then(function(data){
$scope.famproduits = data;
});
/********************************************************
* Event Listeners
* Rapport event listener related to RapportCreateCtrl
********************************************************/
$scope.$on('rapport.create', function() {
$scope.rapport ={};
Notification({message: 'rapport.form.rapportAddSuccess' ,templateUrl:'app/vendors/angular-ui-notification/tpl/success.tpl.html'},'success');
$scope.isDisabled = false;
});
//Validation error in create rapport event listener
$scope.$on('rapport.validationError', function(event,errorData) {
Notification({message: errorData ,templateUrl:'app/vendors/angular-ui-notification/tpl/validation.tpl.html'},'warning');
$scope.isDisabled = false;
});
});
HTML Form
And I have the select of categories and subcategories like this:
...
<div class="form-group">
<label>
Catégorie des produits
</label>
<ui-select ng-model="rapport.catproduit_id" theme="select2" style="width: 100%;">
<ui-select-match placeholder="Selectionner une catécorie">
{{$select.selected.cat || $select.selected}}
</ui-select-match>
<ui-select-choices repeat="catproduit.id as catproduit in catproduits | propertyFilter: {cat: $select.search}">
<div ng-bind-html="catproduit.cat | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
<div class="form-group">
<label>
Famille des produits
</label>
<ui-select ng-model="rapport.famproduit_id" theme="select2" style="width: 100%;">
<ui-select-match placeholder="Selectionner une famille des produits">
{{$select.selected.famille || $select.selected}}
</ui-select-match>
<ui-select-choices repeat="famproduit.id as famproduit in famproduits | propertyFilter: {famille: $select.search}">
<div ng-bind-html="famproduit.famille | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
...
you can transfer array data to map. The key of the map is father category id.So when father category selected, Map[selectedCategory] is the subcategories.
I am trying to use or condition filter in ui select and I am not sure how to process that. I have a similar question answered here. But that is asked for using AND condition which works for me too. Here is my code
HTML
<ui-select ng-model="citySelected">
<ui-select-match>
{{$select.selected.name + ', ' + $select.selected.country}}
</ui-select-match>
<ui-select-choices repeat="city in List | filter: {name: $select.search} | orderBy:'sortOrder'">
<span ng-bind-html="city.name + ', ' + city.country| highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
I am using a properties filter to search through any of the parameters that I have specified.
app.filter('propsFilter', function() {
return function(items, props) {
var out = [];
if (angular.isArray(items)) {
items.forEach(function(item) {
var itemMatches = false;
var keys = Object.keys(props);
for (var i = 0; i < keys.length; i++) {
var prop = keys[i];
var text = props[prop].toLowerCase();
if (item[prop].toString().toLowerCase().indexOf(text) !== -1){
itemMatches = true;
break;
}
}
if (itemMatches) {
out.push(item);
}
});
} else {
// Let the output be the input untouched
out = items;
}
return out;
}
});
//To use add this to UI-Selet Where you are using filter
<ui-select-choices repeat="city in List | propsFilter: {name: $select.search, secondFilter: $select.search, third: $select.search} | orderBy:'sortOrder'">