AngularJS Value Mapping With Dynamic Property And JavaScript

In some scenarios, the JSON models that we have available on the client browser may not provide all necessary information for our view templates. A record may just have a numeric value which makes reference to another model in the system, and we need to be able to map or look up for that information. To illustrate this, let’s look at a dealership inventory vehicle list:

Models:

$scope.cars = [{ model: 'Altima', year: 2015, make: '1' },

            { model: 'XTerra', year: 2015, make: '2' },

            { model: 'Focus', year: 2015, make: '3' }];

$scope.makes = [{ id: 1, name: 'Toyota' },

                { id: 2, name: 'Nissan' },

                { id: 3, name: 'Ford' }];

The models show a list of makes and vehicles that any dealership may have an inventory. We want to build a view that shows the vehicle list. When using the cars list and the help of the ng-repeat directive as show below, we get this result.

As we can see, there is no Make 1,2,3. That is the MakeId. We would like to display the name instead. The problem with this is that the cars list only has the id, so we need to implement a look up with the makes list.  A way to do this is to create a dynamic property with the Make name on the cars list. This can be accomplished by using the ng-init directive which allows us to use an expression or call a JavaScript function.

The ng-init directive calls the controller function to initialize each row in the list. The function performs the look up in the make list and adds the new property makeName which is used on the HTML mark up.

We should note that this approach was done using ng-init directive and a function on the controller (JavaScript). Another approach can be done using the ng-repeat directive and a filter right on the HTML mark up. Read more here.

Thanks for reading.