Thomas Hodges Thomas Hodges - 2 months ago 19
AngularJS Question

Controller As with local function

I'm taking an udemy course on AngularJS- but rewriting all of the example projects using the 'controller as' syntax. This seems to be breaking when I use a local function. In the controller below, this.customers isn't available within the init() function. I've tested this with the strategic placement of console.logs. This seems to work fine if I'm using $scope.

Can anybody help me puzzle this out? The instructor introduced the 'Controller as' syntax but hasn't been using it throughout the course.

(function(){
var OrdersController = function($routeParams) {
var customerId = $routeParams.customerId;
this.orders = null; //not required


this.customers=[
{
id: 1,
joined: '2000-12-02',
name:'John',
city:'Chandler',
orderTotal: 9.9956,
orders: [
{
id: 1,
product: 'Shoes',
total: 9.9956
}
]
},
{
id: 2,
joined: '1965-01-25',
name:'Zed',
city:'Las Vegas',
orderTotal: 19.99,
orders: [
{
id: 2,
product: 'Baseball',
total: 9.995
},
{
id: 3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1944-06-15',
name:'Tina',
city:'New York',
orderTotal:44.99,
orders: [
{
id: 4,
product: 'Headphones',
total: 44.99
}
]
},
{
id: 4,
joined: '1995-03-28',
name:'Dave',
city:'Seattle',
orderTotal:101.50,
orders: [
{
id: 5,
product: 'Kindle',
total: 101.50
}
]
}
];

//console.log(this.customers);



init = function () {
//Search the customers for the customerId - local function
console.log(this.customers);
for (var i=0,len=this.customers.length;i<len;i++) {
if (this.customers[i].id === parseInt(customerId)) {
this.orders = this.customers[i].orders;
break;
}
}
}


init();
};

//OrdersController.$inject = ['$routeParams'];

angular.module('customersApp')
.controller('OrdersController', OrdersController);
}());

Answer

First assign your this object to a variable:

var vm = this;

Then use the vm variable instead of this:

vm.orders = null; //not required
vm.customers=[
    {
        id: 1, 
        joined: '2000-12-02', 
        name:'John', 
        city:'Chandler', 
        orderTotal: 9.9956,
        orders: [
            {
                id: 1,
                product: 'Shoes',
                total: 9.9956
            }
        ]
    }, 
    {
        id: 2, 
        joined: '1965-01-25',
        name:'Zed', 
        city:'Las Vegas', 
        orderTotal: 19.99,
        orders: [
            {
                id: 2,
                product: 'Baseball',
                total: 9.995
            },
            {
                id: 3,
                product: 'Bat',
                total: 9.995
            }
        ]
    },
    {
        id: 3, 
        joined: '1944-06-15',
        name:'Tina', 
        city:'New York', 
        orderTotal:44.99,
        orders: [
            {
                id: 4,
                product: 'Headphones',
                total: 44.99
            }
        ]
    }, 
    {
        id: 4, 
        joined: '1995-03-28',
        name:'Dave', 
        city:'Seattle', 
        orderTotal:101.50,
        orders: [
            {
                id: 5,
                product: 'Kindle',
                total: 101.50
            }
        ]
    }
];

And finally in your function console log the array:

init = function () {
    //Search the customers for the customerId - local function
    console.log(vm.customers);
    for (var i=0,len=vm.customers.length;i<len;i++) {
       if (vm.customers[i].id === parseInt(customerId)) {
           vm.orders = vm.customers[i].orders;
           break;
       }
    }
}