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
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()">
Need to remove comma if value is empty works good if I have value
present at start or middle; But same doesn't work in this scenario.
app.filter('isCSV', function() {
return function(data) {
return (data !== '') ? data + ', ' : '';
};
});
Angularjs ng repeat for addressline - Plunker
I would instead operate on arrays of properties and use a pair of filters, one to remove empty values, and one to join the array.
This way it's very explicit about what properties you are displaying.
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in details">
{{ [ item.address0, item.address1, item.address2, item.address3] | removeEmpties | joinBy:', ' }}
</li>
</ul>
</body>
With the following filters:
app.filter('removeEmpties', function () {
return function (input,delimiter) {
return (input || []).filter(function (i) { return !!i; });
};
});
app.filter('joinBy', function () {
return function (input,delimiter) {
return (input || []).join(delimiter || ',');
};
});
Here's the updated Plunkr
Tricky but should work in your case Also no filter need
{{ item.address0 }} <span ng-if="item.address1">,
</span> {{ item.address1}}<span ng-if="item.address2">,</span>{{
item.address2}}
<span ng-if="item.address3">,</span>{{ item.address3}}
Here is working example
I would prefer writing a function instead of adding a filter so many times.
$scope.mergeAddresses = function(item) {
var address = item.address0;
[1,2,3].forEach(function(i) {
var add = item["address"+i];
if (!add) return;
address += (address ? ", " : "") + add;
});
if (address) address += ".";
return address;
}
Plunker
Im trying to create a function that reads the value of an input and triggers a series of true/false, however the code below keeps returning "passStrength is not defined."
From what I can find, oninput isn't supported by Angular. How can achieve this in Angular?
Within my controller:
$scope.passStrength = function(input) {
if (input.value.toLowerCase().indexOf(/[a-z]/) > -1) {
$scope.lwrChar = true;
console.log('lower ' + $scope.lwrChar);
} else if (input.value.toUpperCase().indexOf(/[A-Z]/) > -1) {
$scope.uprChar = true;
console.log('upper ' + $scope.uprChar);
} else if (input.value.indexOf() == !isNaN(n)) {
$scope.nbrChar = true;
console.log('number ' + $scope.nbrChar);
} else if (input.value.length >= 8) {
$scope.countChar = true;
console.log('count ' + $scope.countChar);
}
};
and in my markup:
<input id="password" oninput="passStrength()" />
To fire an event when the input changes, use ng-change. Also, you must define a ng-model.
<input ng-model="password" ng-change="passStrength(password)" />
Edit:
Created a plunker demonstrating it
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'">
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: