JavaScript Selecting Filter

Question

Background: There's a table from which I can choose employees. I want to filter these employees by name.(I know name is not a good way to filter, this is just an example) Basically I have a drop down from which I choose one of the filters.

My declaration: $scope.filters = null;. I also have this deceleration to choose my filter $scope.chosenFilter= null;.

I use the following to retrieve the different filters I have $scope.filters = retrieveFilters(info.Names);

retrieveFilters looks like the following:

var retrieveFilters = function(rows) {

    var filterWrapper = document.querySelector(".filterWrapper");
    var datasetOptions = [];

    $scope.predicate = 'Name';

    if (rows) {
        //Add Default option
        datasetOptions.push({
            name: $scope.data.Fnames.defaultFilterOptionLabel,
            value: ''
        });
        $scope.chosenFilter = datasetOptions[0];

        _.forEach(rows, function(ele) {
            datasetOptions.push({
                name: ele,
                value: ele
            });
        });
    } else {
        filterWrapper.style.display = "none";
            }

    return datasetOptions;
};

I use the following to choose my filter:

$scope.$watch('chosenFilter', function() {
    var filterSearchInput = document.querySelector(".filterWrapper input");
    ng.element(filterSearchInput).triggerHandler('input');
});

Everything is fine and the display works on first load as I have set the default with

//Add Default option
datasetOptions.push({
    name: $scope.data.Fnames.defaultFilterOptionLabel,
    value: ''
});

From the default table whenever I click on an employees name hes details are displayed. However whenever I filter and click on the employees name, nothing is displayed. Whenever I click on a specific employees name at the default table and then filter in the same name the information also shows up, as I cache it each time.

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

I assume that you're displaying this data somewhere in your GUI using ng-repeat. Angular has a lot of great built-in features for this. Check out the answer here: AngularJS custom search data by writing custom filter for a way to approach this more from an Angular direction. You also might want to check out this question and answer: "Thinking in AngularJS" if I have a jQuery background?.

edited May 23 '17 at 10:28

Community

1
1

answered May 12 '16 at 13:39

Mike Feltman

5,160
1
17
38

Yes I am displaying using ng-repeat and the data displays fine whenever I choose a specific name from the options. However when i click on the actual row which is there no information is displayed. But if I click on the row in the default table, the one that's not "Filtered", the information does display. I just can't get the information to display whenever it is filtered, it is therefore what has me thinking I am doing the filtering the wrong way. – P. Rickes May 12 '16 at 15:06
Yeah, check out the filtering in the question I linked to above. In short, ng-repeat has built-in filtering and making use of it is generally the way to go. – Mike Feltman May 12 '16 at 15:08

JavaScript Selecting Filter

1 Answers1