Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I recognize I am doing something stupid, so please indulge me:

Html:

Filter: <input type="radio" ng-model="Type" value="Rear"> Rear
<input type="radio" ng-model="Type" value="Front"> Front
<br>
Select:
<name-value-select  entry="entry" field="axleType" options="filterTypes"></name-value-select>

Controller:

$scope.$watch('Type', function (Type) {
    $scope.filterTypes = [];
    if ($scope.axleTypes == undefined || $scope.axleTypes == []) {
        $scope.axleTypes = API.GetAxleTypes;
    }
    angular.forEach($scope.axleTypes, function (type) {
        console.log('axleType: ' + type);
        console.log('Type: ' + type);
        if (axleType.Type == Type) {
            this.push(axleType);
        }
    }, $scope.filterTypes);
    $scope.filterTypes.sort(function (a, b) {
        return a.Description.localeCompare(b.Description);
    });
});

I cannot even loop thru the axleTypes array in my watch function. It appears it is not picking up a collection which is odd because it bypasses populating the axleTypes if undefined or [].

I am doing something so stupid, I can't see it.

Update: Per Jason's request

(1) My angular controller:

$scope.entry = {
    Description: ''
};
$scope.Type = 'Front';
$scope.entry.type = '';

$scope.$watch('Type', function (Type) {
    $scope.filterTypes = [];
    $scope.axleTypes = new API.GetAxleTypes(function (axleTypes) {
        angular.forEach($scope.axleTypes, function (axleType) {
            if (axleType.Type == Type) {
                this.push(axleType);
                }
        }, $scope.filterTypes);
    });

    $scope.filterTypes.sort(function (a, b) {
        return a.Description.localeCompare(b.Description);
    });
});

(2)My Html:

Filter: <input type="radio" ng-model="Type" value="Rear"> Rear
<input type="radio" ng-model="Type" value="Front"> Front
<br>
Select:
<name-value-select entry="entry" field="axleType" options="filterTypes"></name-value-select>

No more errors Jason, however, when I toggle the two radio buttons nothing happens, ie, Front Axles still show when I choose the Rear axle radio button. Ughh.

share|improve this question
1  
$scope.axleTypes == [] will never be true. [] == [] is false. – Joseph Silber Apr 22 at 19:08
still, there is the undefined and this is an 'or' situation. – Scott Malachowski Apr 22 at 19:09
can you post plunker example? Seems there is a way to do it simplier by angular's internal filters. – Valentyn Shybanov Apr 22 at 19:19
Someone already made one: plnkr.co/edit/o51eqq6XjIfAjvdtrz96?p=preview The problem is once I use my API and not use the hard coded array, I get nothing. And I know my API works because above this directive I have: <select ng-model="$parent.selectedFrontAxle" ng-options="axleType.Description for axleType in axleTypes | filterByType: 'Front' | orderBy:'Description'" id="frontAxles" class="formRequire" required> – Scott Malachowski Apr 22 at 19:32
1  
I guess you're using $http.get() for fetching data? In this case check if you're promise-aware - result of .get() is not object/array, but a promise that would be resolved upon request. – Valentyn Shybanov Apr 22 at 19:45
show 3 more comments

1 Answer

Okay, cool. I think this is what you want to do. Basically you are loading up your data first, then setting the watch. This way we don't call the async call too many times. I modified the Plunker to use this methodology http://plnkr.co/edit/lQbn4hXmJ1Z4YpKdb4u3?p=preview:

$scope.axleTypes = API.GetAxleTypes(function () {
    $scope.$watch('Type', function (Type) {
        $scope.filterTypes = [];
        angular.forEach($scope.axleTypes, function (type) {
            console.log('axleType: ' + type);
            console.log('Type: ' + type);
            if (axleType.Type == Type) {
                this.push(axleType);
            }
            if(!$scope.$$phase) $scope.$digest();
        }, $scope.filterTypes);
    });
});

$scope.filterTypes.sort(function (a, b) {
    return a.Description.localeCompare(b.Description);
});
share|improve this answer
Jason: See my new updates. I followed your advice and the error is gone, and the initial axles populated in select are correct. But when I choose the Rear axle radio button, the $watch function dos not kick in. – Scott Malachowski Apr 22 at 21:24
See edit above. I think you might just be missing a $digest cycle on the callback. – Jason Aden Apr 22 at 21:40
if(!$scope.$$phase) $scope.$digest(); did not work and really do not see why I even needed it, it wasn't in the plkr that had the data hard-codied. [plnkr.co/edit/o51eqq6XjIfAjvdtrz96?p=preview] – Scott Malachowski Apr 22 at 21:47
Okay, so here's a difference. The sample does not have an async call involved. That is actually why I was saying that you might want to do $scope.$digest() because it wouldn't auto-run after the async call comes back. But there's a better way to handle this. Just make the call one time rather than on each change. I'll edit the example above. – Jason Aden Apr 23 at 0:37
If you got something that said "Chloe", that was a mistake... my daughter wanted to see what her name looked liked in code. :) I went back to the working version now. – Jason Aden Apr 23 at 1:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.