AngularJS Single Value Look Up 2.0

created by ozkary.com

by ozkary

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="app">
    <div ng-controller="app.inventory" class="container">
        <table class="table">
            <caption>Vehicle List - Make Name look up</caption>
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Make</th>
                    <th>Model</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="car in cars">
                    <td>{{car.year}}</td>
                    <td class="text-success" ng-repeat="make in makes | filter:{id:car.make}">{{make.name}}</td>
                    <td>{{car.model}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('app.inventory', ['$scope', '$filter', inventory]);

function inventory($scope, $filter) {
    $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'
    }];

}