0

I have what should be a very simple task. I want to sort a drop down menu in angular based off of a given parameter. Should be easy.

I make a call to a dataservice the returns some data like so:

"success" : true,
    "data" : {
        "this_status" : [{
                "DefNo" : "111*A",
                "Com" : "111",
}, {
                "DefNo" : "222*B",
                "Com" : "222",
}, {
                "DefNo" : "333*C",
                "Com" : "333",
}
];
        "this_info" : [{
                 "Req" : "MUST",
                 "DefCom" : "111",
}, {
                 "Req" : "NoMUST",
                 "DefCom" : "222"
}, {
                 "Req" : "MUST",
                 "DefCom" : "333"
}]}

My task is to make a list with all the DefCom values that also have an associated MUST value. I need to list "DefCom" numbers that have a "Req" that is "MUST", inside of a dropdown. So in my example, my dropdown would have values 111 and 333.

In my controller, I execute the call

   $scope.getDefCom = function(){
        MyAPIservice.getDefCom().success(function(response){
            $scope.info = response.data.this_info;
            $scope.infoList = $scope.info;
        });
        }

Where I have this factory:

angular.module('MyAPI.services', [])
  .factory('MyAPIservice', function($http) {
    var MyAPI = {};
    MyAPI.getDefCom = function () {
        return $http({
            method: 'GET',
            url: '/thisis/mylink/'
        });
    };

    return invoiceheaderAPI;
});

This works for my first initiative, make a drop down that will list DefCom numbers. However, next I need to filter them.

$scope.require = MUST in this example.

Inside my template:

<option ng-repeat="option in DefComList" value="{{option.DefCom}}">{{option.DefCom}} </option>

I tried doing a filter like so:

ng-repeat="option in DefComList | filter: {Req: $scope.require}"

However upon more reading I couldn't find anything where you can insert a $scope variable into a filter. Most of the suggestions leaned towards writing your own filter. I did this, using angular.forEach. My filter is below:

 $scope.filterDefs = function($scope) {
        var clrreturn = false;
        angular.forEach($scope.info, function(value, key) {
            if (value.DefCom == $scope.require)
                clrreturn = true;

        });
        return clrreturn;
    };

However, my custom filter is running before getting the results of $scope.info from the $scope.getDefCom function. This is throwing an Error: undefined is not an object (evaluating '$scope.info') before $scope.info is ready. I know that this has to do with promises, so I tried writing in deferred promises. However, this didn't work either, and I have gotten frustrated because this seems like it should be a very simple task and I might be making it way harder for myself than it should be.

1 Answer 1

2

I feel you might be over thinking it; If I'm understanding what you want to do then all you should need in your filter is:

ng-repeat="option in DefComList | filter: require : true"

Note the true for exact matching as your search for 'MUST' would also match 'noMUST'.

Here is a quick fiddle I put together for you: https://jsfiddle.net/nqya24r4/

Also if you specifically only want to search the Req property, you can filter using an object instead of a string. Here's another fiddle demonstrating this: https://jsfiddle.net/t3bw5L5d/2/

I hope this helps.

Sign up to request clarification or add additional context in comments.

3 Comments

Thank you! This works perfectly. I was definitely overthinking it, this is way easier than writing a custom filter.
No problem, glad to help!
With ng-options you could also do it like in this jsfiddle.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.