AngularJS: Bind UI Select selection sequentially

-
Hello,

I felt lucky to work with angularJS with the integration with SharePoint(as backend) in my recent project. There was a requirement to have two drop-downs on a single page application where on selection of one; other drop-down value will be automatically filtered.  I am going to share with you guys that how I have implemented.  I understand that this may not be Ideal way of doing it but I am sure that it is quickest solution that I did in code to achieve this requirement.

HTML: The below html will generate two dropdowns and populate with country and states data.

<h3>Countries</h3>
<ui-select ng-model="ctrl.country.selected" name="country" theme="bootstrap" title="Select a Country" >
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in ctrl.countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
<h3>States</h3>
<ui-select ng-model="ctrl.state.selected" name="state" theme="bootstrap" title="Select a state">
<ui-select-match placeholder="Select or search a state in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="s in ctrl.states | countryFilter: { concode: ctrl.country.selected.code }">
<span ng-bind-html="s.name | highlight: $select.search"></span>
<small ng-bind-html="s.concode | highlight: $select.search"></small>
</ui-select-choices>
<ui-select-no-choice>
<span ng-if="ctrl.country.selected.name">&nbsp; No state found for '{{ctrl.country.selected.name}}' country !</span>
<span ng-if="!ctrl.country.selected.name">&nbsp; Please select country !</span>
</ui-select-no-choice>
</ui-select>

Custom Filter:

If you have notice in abouve html code, I have created a custom search filter which search the states dropdown data based on the countyr selected using first dropdown. Here is the code for the filter:

app.filter("countryFilter", function () {
return function (items, props) {
var out = [];
if (angular.isArray(items)) {
var keys = Object.keys(props);
items.forEach(function (item) {
var itemMatches = false;
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) {
if (item[prop].toString().toLowerCase() === text) {
itemMatches = true;
break;
}
}
if (itemMatches) {
out.push(item);
}
});
} else {
// Let the output be the input untouched
out = items;
}
return out;
};
});

Demo: Plunker Demo

Output:

untitled

Hope this post will help you creating synchronous drop down using UI-Select.

Happy Coding !!

Comments

Post a Comment

Popular posts from this blog

Hide Ribbon on SharePoint 2013 using CSS

-
Hi Guys, I recently experienced the migration from SharePoint 2010 to 2013. I was earlier hiding Ribbon using the SPSecurityTrimmedControl and CSS. But in SP 2013 MS has divided whole ribbon in two section: s4-ribbonrow and suiteBar Hiding the ribbon is as much as easier as it was in 2010 version. But here we just need to take care of above two mentioned sections. I have gone thorough some of the blogs where people are saying that we have change the html file(Seattle.html or oslo.html) and design manger will take care of creating master page for you (ref: Hide Ribbon ). But there is another traditional way of doing same, follow the given steps: 1) Open the master page file in the SharePoint designer. 2) Add the style tag to hide the ribbon for all the user: #s4-ribbonrow, #suiteBar { display : none; } 3) Now we have to do some more changes so that at least system account can access the ribbon. Find out the <div id="s4-ribbonrow"> tag. 4) Insert the following code insi...
Read more

Configure external site as content sources in sharepoint search

-
Image
Hi, In my previous post( Creating and configuring Search service application ) I explained how to configure the search service application and its configuration. We can also search the external sites content using the SharePoint search just by creating new content source. Follow the given steps to create the new content source for external site. To get to the Manage Content Sources page Verify that the user account that is performing this procedure is a service application administrator for the Search service application. On the Home page of the SharePoint Central Administration Web site, in the Application Management section, click Manage service applications . On the Manage Service Applications page, click Search Service Application . On the Search Administration Page, in the Crawling section, click Content Sources .                     After clicking on the link you will be redirected to the page where all the available content sources are displayed.                    To ...
Read more

Powershell: Creating and updating profile property

-
Hi Friends, I have recently create a user profile property using power shell commands. I am just sharing the code i used to create and then edit the properties like description, privacy settings, display settings etc of the property. Code to add/edit: if ((Get-PSSnapin -Name Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue) -eq $null ) { Add-PsSnapin Microsoft.SharePoint.PowerShell } [System.Reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint") [System.Reflection.Assembly]::LoadWithPartialName("microsoft.sharepoint.portal") [System.Reflection.Assembly]::LoadWithPartialName("Microsoft.Office.Server") [System.Reflection.Assembly]::LoadWithPartialName("System.Web") [System.Reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint.Taxonomy.dll") function CheckNull($obj, $name) { if ($obj -eq $null) { Write-Host $name "is null" -ForegroundColor Red return $true } return $false } $siteurl = "http:...
Read more