AngularJs - forEach scope array - not working

Question

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.

$scope.axleTypes == [] will never be true. [] == [] is false. — Joseph Silber
– Joseph Silber, Commented Apr 22, 2013 at 19:08
still, there is the undefined and this is an 'or' situation. — Bye
– Bye, Commented Apr 22, 2013 at 19:09
can you post plunker example? Seems there is a way to do it simplier by angular's internal filters. — Valentyn Shybanov
– Valentyn Shybanov, Commented Apr 22, 2013 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> — Bye
– Bye, Commented Apr 22, 2013 at 19:32
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
– Valentyn Shybanov, Commented Apr 22, 2013 at 19:45

Jason Aden · Accepted Answer · 2013-04-23 00:59:12Z

1

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);
});

edited Apr 23, 2013 at 0:59

answered Apr 22, 2013 at 20:40

Jason Aden

2,8231 gold badge20 silver badges13 bronze badges

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

5 Comments

Bye Over a year ago

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.

Jason Aden Over a year ago

See edit above. I think you might just be missing a $digest cycle on the callback.

Bye Over a year ago

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]

Jason Aden Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

AngularJs - forEach scope array - not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related