brandonb927 · August 1, 2014 19:02
diff --git a/cars.html b/cars.html
 <!doctype html>
 <html ng-app>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
  </head>
  <body ng-controller="CarSelector">
    <h3>Select A Dream Car</h3>

    <form>
      <select title="Choose a Dream Car"
              ng-model="selectedCar"
              ng-options="car.model group by car.make for car in cars">
        <option value="">Select A Car</option>
      </select>

      <br />

      <button type="button" class="btn btn-primary" ng-click="addSelectedCar()">Add Car</button>
    </form>

    <hr />

    <h3>Your Dream Cars</h3>

    <ul>
      <li ng-repeat="car in dreamCars">
        {{car.make}}: {{car.model}} <button type="button" ng-click="removeCar(car, $index)">&times;</button>
      </li>
    </ul>

    <script src="cars.js"></script>
  </body>
 </html>
diff --git a/cars.js b/cars.js
 // Helper to get an index value by an object key
 Array.prototype.getIndexBy = function (name, value) {
  for (var i = 0; i < this.length; i++) {
    if (this[i][name] == value) {
      return i;
    }
  }
 }

 // Create the CarSelector controller function
 function CarSelector ($scope, $filter, $timeout) {
  // The given unmodified dreamCars array of objects
  var dreamCars = [
    {
      make: "Aston Martin",
      model: "DB9"
    },
    {
      make: "Lotus",
      model: "Elise"
    },
    {
      make: "Maserati",
      model: "Quattroporte"
    },
    {
      make: "Porsche",
      model: "Panamera"
    },
    {
      make: "Aston Martin",
      model: "Vanquish"
    },
    {
      make: "Maserati",
      model: "GranTurismo"
    },
    {
      make: "Maserati",
      model: "GranCabrio"
    },
    {
      make: "Lotus",
      model: "Exige"
    },
    {
      make: "Aston Martin",
      model: "Vantage"
    },
    {
      make: "Porsche",
      model: "911"
    },
    {
      make: "Bugatti",
      model: "Veyron"
    },
    {
      make: "Bugatti",
      model: "Galibier"
    },
    {
      make: "Lotus",
      model: "Evora"
    },
    {
      make: "Lotus",
      model: "2-eleven"
    },
  ];

  // Filter the cars select list by make
  $scope.filterCars = function () {
    $scope.cars = $filter('orderBy')($scope.cars, ['make','model']);
  };

  // Add the selected car to the dream car list
  $scope.addSelectedCar = function () {
    // If you haven't selected a car
    if (!$scope.selectedCar) {
      return;
    }

    // Remove the selected car from the cars list
    // by it's index using the model name
    var index = $scope.cars.getIndexBy('model', $scope.selectedCar.model);
    $scope.cars.splice(index, 1);

    // Add the list of selectedCar to the dreamCars list
    $scope.dreamCars = $scope.dreamCars.concat($scope.selectedCar);

    // Set the next selection as the next car in the make list
    // or default to the first in the list
    $scope.selectedCar = $scope.cars[index];
  };

  // Remove the car by it's index
  $scope.removeCar = function (car, index) {
    // Strip angular $$hashkey
    car = angular.copy(car);

    // Note: this seems hacky but it seems to work...
    $timeout(function () {
      // Trigger an $apply so that Angular runs a $digest cycle
      // so that it can re-order the list properly in the UI
      $scope.$apply(function() {
        // Put the car back in the original cars list
        $scope.cars.push(car);

        // Re-run the car order filter
        $scope.filterCars();
      });
    });

    // Remove the car from the dream car list
    $scope.dreamCars.splice(index, 1);
  };

  // Create a new array for dream cars
  $scope.dreamCars = [];

  // Set up the initial cars list
  $scope.cars = dreamCars;

  // Filter the cars by make
  $scope.filterCars();
 };

 // Init our app
 angular.module('dreamCars', [])
       .controller('CarSelector', CarSelector);
	<!doctype html>
	<html ng-app>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
	</head>
	<body ng-controller="CarSelector">
	<h3>Select A Dream Car</h3>

	<form>
	<select title="Choose a Dream Car"
	ng-model="selectedCar"
	ng-options="car.model group by car.make for car in cars">
	<option value="">Select A Car</option>
	</select>

	<br />

	<button type="button" class="btn btn-primary" ng-click="addSelectedCar()">Add Car</button>
	</form>

	<hr />

	<h3>Your Dream Cars</h3>

	<ul>
	<li ng-repeat="car in dreamCars">
	{{car.make}}: {{car.model}} <button type="button" ng-click="removeCar(car, $index)">×</button>
	</li>
	</ul>

	<script src="cars.js"></script>
	</body>
	</html>
	// Helper to get an index value by an object key
	Array.prototype.getIndexBy = function (name, value) {
	for (var i = 0; i < this.length; i++) {
	if (this[i][name] == value) {
	return i;
	}
	}
	}

	// Create the CarSelector controller function
	function CarSelector ($scope, $filter, $timeout) {
	// The given unmodified dreamCars array of objects
	var dreamCars = [
	{
	make: "Aston Martin",
	model: "DB9"
	},
	{
	make: "Lotus",
	model: "Elise"
	},
	{
	make: "Maserati",
	model: "Quattroporte"
	},
	{
	make: "Porsche",
	model: "Panamera"
	},
	{
	make: "Aston Martin",
	model: "Vanquish"
	},
	{
	make: "Maserati",
	model: "GranTurismo"
	},
	{
	make: "Maserati",
	model: "GranCabrio"
	},
	{
	make: "Lotus",
	model: "Exige"
	},
	{
	make: "Aston Martin",
	model: "Vantage"
	},
	{
	make: "Porsche",
	model: "911"
	},
	{
	make: "Bugatti",
	model: "Veyron"
	},
	{
	make: "Bugatti",
	model: "Galibier"
	},
	{
	make: "Lotus",
	model: "Evora"
	},
	{
	make: "Lotus",
	model: "2-eleven"
	},
	];

	// Filter the cars select list by make
	$scope.filterCars = function () {
	$scope.cars = $filter('orderBy')($scope.cars, ['make','model']);
	};

	// Add the selected car to the dream car list
	$scope.addSelectedCar = function () {
	// If you haven't selected a car
	if (!$scope.selectedCar) {
	return;
	}

	// Remove the selected car from the cars list
	// by it's index using the model name
	var index = $scope.cars.getIndexBy('model', $scope.selectedCar.model);
	$scope.cars.splice(index, 1);

	// Add the list of selectedCar to the dreamCars list
	$scope.dreamCars = $scope.dreamCars.concat($scope.selectedCar);

	// Set the next selection as the next car in the make list
	// or default to the first in the list
	$scope.selectedCar = $scope.cars[index];
	};

	// Remove the car by it's index
	$scope.removeCar = function (car, index) {
	// Strip angular $$hashkey
	car = angular.copy(car);

	// Note: this seems hacky but it seems to work...
	$timeout(function () {
	// Trigger an $apply so that Angular runs a $digest cycle
	// so that it can re-order the list properly in the UI
	$scope.$apply(function() {
	// Put the car back in the original cars list
	$scope.cars.push(car);

	// Re-run the car order filter
	$scope.filterCars();
	});
	});

	// Remove the car from the dream car list
	$scope.dreamCars.splice(index, 1);
	};

	// Create a new array for dream cars
	$scope.dreamCars = [];

	// Set up the initial cars list
	$scope.cars = dreamCars;

	// Filter the cars by make
	$scope.filterCars();
	};

	// Init our app
	angular.module('dreamCars', [])
	.controller('CarSelector', CarSelector);