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

Fix for Memory leak by Noderunner.exe

-
Image
Hi, Issue: My virtual development machine is allocated 8 GB RAM out of 16 GB of Host. Still it runs very slow. In order to develop things I have to stop the Search service and memory consumption reduced to ~5GB from 6-7GB. But this is just a work around what if I need to build some module which requires Search service. A quick investigation in Task Manager highlight Memory usage by search components are much large then other processes.  Several NodeRunner.exe processes consume lots of Memory and CPU. The culprit processes are Microsoft SharePoint Search component. Although there is no problem with just killing the noderunner.exe processes in Task Manager; SharePoint creates them again almost immediately. Cause: The architecture of search has undergone lot of changes in SharePoint 2013. Many of the core components are replaced by the FAST Search components. Below are a few new components which are added in the new architecture Crawl Component Content Processing Component Query P...
Read more