CodingTest

InlineEditing

by Samar Pattanayak

HTML

<div ng-app="myTest">

  <div ng-controller="myTestController">
    Enter Any name:
    <input type="text" placeholder="Enter a value" ng-model="search" /> {{firstName}}
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Email</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>IP</th>
          <th>Latitude</th>
          <th>Longitude</th>
          <th>Created At</th>
          <th>Updated At</th>

        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in customers | filter:search" ng-include="getTemplate(x)">
        </tr>
      </tbody>
    </table>
    <script type="text/ng-template" id="display">
      <td>{{ x.id }}</td>
      <td>{{ x.email }}</td>
      <td>{{ x.first_name }}</td>
      <td>{{ x.last_name }}</td>
      <td>{{ x.ip }}</td>
      <td>{{ x.latitude }}</td>
      <td>{{ x.longitude }}</td>
      <td>{{ x.created_at }}</td>
      <td>{{ x.updated_at }}</td>
      <td>
        <button ng-click="edit(x)">Edit</button</td>
    </script>
    <script type="text/ng-template" id="edit">
      <td>
        <input type="text" ng-model=x.id/>
      </td>
      <td>
        <input type="text" ng-model=x.email/>
      </td>
      <td>
        <input type="text" ng-model=x.first_name/>
      </td>
      <td>
        <input type="text" ng-model=x.last_name/>
      </td>
      <td>
        <input type="text" ng-model=x.ip/>
      </td>
      <td>
        <input type="text" ng-model=x.latitude/>
      </td>
      <td>
        <input type="text" ng-model=x.longitude/>
      </td>
      <td>
        <input type="text" ng-model=x.created_at/>
      </td>
      <td>
        <input type="text" ng-model=x.updated_at/>
      </td>
      <td>
        <button>Update</button>
      </td>
      <td>
        <button>Cancel</button>
      </td>
    </script>





  </div>


</div>

JavaScript

var app = angular.module('myTest', []);
app.controller('myTestController', function($scope, $http) {
$scope.customers = JSON.parse('[{"id":1,"email":"[email protected]","first_name":"Joshua","last_name":"Hamilton","ip":"135.75.95.238","latitude":-27.634171,"longitude":-52.273891,"created_at":"2015-01-21 03:20:11","updated_at":null},{"id":2,"email":"[email protected]","first_name":"Anthony","last_name":"Nichols","ip":"147.3.15.197","latitude":56.47633,"longitude":53.797821,"created_at":"2015-01-16 00:10:27","updated_at":null},{"id":3,"email":"[email protected]","first_name":"Lawrence","last_name":"Murphy","ip":"70.210.188.75","latitude":16.58333,"longitude":121.5,"created_at":"2015-01-20 20:19:37","updated_at":null},{"id":4,"email":"[email protected]","first_name":"Scott","last_name":"Burke","ip":"104.203.83.37","latitude":37.692478,"longitude":120.971481,"created_at":"2015-01-01 13:43:44","updated_at":null}]');
  

  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.customers = [{
    "id": 1,
    "email": "[email protected]",
    "first_name": "Joshua",
    "last_name": "Hamilton",
    "ip": "135.75.95.238",
    "latitude": -27.634171,
    "longitude": -52.273891,
    "created_at": "2015-01-21 03:20:11",
    "updated_at": null
  }, {
    "id": 2,
    "email": "[email protected]",
    "first_name": "Anthony",
    "last_name": "Nichols",
    "ip": "147.3.15.197",
    "latitude": 56.47633,
    "longitude": 53.797821,
    "created_at": "2015-01-16 00:10:27",
    "updated_at": null
  }];

  $scope.getTemplate = function(info) {
    if (info.id === $model.customers.id)
    //console.log("Hi");
      retun 'display';
    else
      retun 'display';

  }

  $scope.edit = function(Info) {
    console.log("Hi");
    $scope.customers.selected = angular.copy(info);
  }

  $scope





});