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.[] == []
isfalse
. – Joseph Silber Apr 22 at 19:08