Wednesday, September 16, 2015

Angular UI-Select custom filters

We can filter the data in UI-Select from remote server. 
Need: We do not want to load all the data locally . Performance would be better


Html



<ui-select id="user" ng-model="data.SelectedUsers" class="form-control-static">
    <ui-select-match placeholder="Select a User...">{{$select.selected.Text}}</ui-select-match>
    <ui-select-choices repeat="user in data.MigrationUsers | propsFilter: {Text: $select.search}"
                       refresh="refreshUsers($select.search)"
                       refresh-delay="1000">
        <div ng-bind-html="user.Text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>


JavaScript function
 $scope.refreshUsers = function (searchText) {
                //alert(searchText);
                $scope.GetMigrationUsers(searchText);
            };
        $scope.GetMigrationUsers = function (searchText) {
                if (searchText)
                {
                    $http.get("/Migration/GetMigrationUsers?id=" + searchText)
                       .success(function (response) {
                           $scope.data = {
                               SelectedUsers: [],
                    MigrationUsers: response.MigrationUsers,
                 }
               });
             }
         };

No comments:

Post a Comment