AngularJS Restaurant Manager - Eric David Smith

by Eric David Smith

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div ng-app="" ng-controller="RestaurantController">
            <div class="well">
                <form>
                     <h3>AngularJS Restaurant Manager</h3>

                    <hr/>
                    <div class="form-group">
                        <label for="restaurant" class="col-sm-3 control-label">Restaurant Name</label>
                        <div class="col-sm-8 form-group">
                            <input type="text" name="restaurant" ng-model="newrestaurant.restaurant" class="form-control" placeholder="Restaurant Name" />
                        </div>
                        <label for="name" class="col-sm-3 control-label">Cuisine Type</label>
                        <div class="col-sm-8 form-group">
                            <select ng-model="newrestaurant.cuisine" ng-options="cuisine.name for cuisine in cuisines track by cuisine.value" class="form-control">
                                <option value="">Choose Cuisine Type</option>
                                <!-- <option value="{{restaurant.cuisine[0].value}}" ng-selected="$last">{{restaurant.cuisine[0].name}}</option> -->
                            </select>
                        </div>
                        <label for="name" class="col-sm-3 control-label">Phone Number</label>
                        <div class="col-sm-8 form-group">
                            <input type="text" name="phone" ng-model="newrestaurant.phone" class="form-control" placeholder="123-456-7890" />
                        </div>
                        <div class="form-group" data-ng-repeat="contact in contacts">
                            <label for="contact" class="col-sm-3 control-label">Contact</label>
                            <div class="col-sm-3 form-group">
                                <input type="text" ng-model="contact.name"...

JavaScript

var uid = 1;

      function RestaurantController($scope) {

          $scope.restaurants = [];
          $scope.selectedCuisine = 0;

          $scope.contacts = [{
              id: 'contact1'
          }];

          $scope.cuisines = [{
              id: 1,
              value: 'american',
              name: 'American'
          }, {
              id: 2,
              value: 'italian',
              name: 'Italian'
          }, {
              id: 3,
              value: 'french',
              name: 'French'
          }, {
              id: 4,
              value: 'chinese',
              name: 'Chinese'
          }, {
              id: 5,
              value: 'ethiopian',
              name: 'Ethiopian'
          }, {
              id: 6,
              value: 'tibetan',
              name: 'Tibetan'
          }, {
              id: 7,
              value: 'martian',
              name: 'Martian'
          }];

          $scope.addNewContact = function () {
              var newContactNo = $scope.contacts.length + 1;
              $scope.contacts.push({
                  id: 'contact' + newContactNo
              });
          };

          $scope.showAddContact = function (contact) {
              return contact.id === $scope.contacts[$scope.contacts.length - 1].id;
          };

          $scope.deleteContact = function (contact) {
              for (i in $scope.contacts) {
                  if ($scope.contacts[i].id == $scope.contacts[$scope.contacts.length - 1].id) {
                      $scope.contacts.splice(i, 1);
                  }
              }
          };

          $scope.saveRestaurant = function () {

              if ($scope.newrestaurant.id == null) {
                  $scope.newrestaurant.id = uid++;
                  $scope.restaurants.push($scope.newrestaurant);
              } else {

                  for (i in $scope.restaurants) {
                      if ($scope.restaurants[i].id == $scope.newrestaurant.id) {
                    ...