title: Reflecting data from JSON path to table using Angular JS
body: <p>To add the JSON data to Table by using Angular JS.<br>
      
      
      
      
      https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">   
          
      
        
      
       
      
      
      
      Filter
        
        
        <li>Ascending Order</li>
        <li>Descending Order</li>
        
        
        
       
        
        USER ID
        ID
        TITLE
        COMPLETED
        ACTION
     </p>
  
  <pre><code>                &lt;tbody&gt;
                      &lt;tr ng-repeat="x in userId"&gt;
                          &lt;td&gt;
                              &lt;div ng-hide="editingData[x.id]"&gt;{{x.userId}}       &lt;/div&gt;
                              &lt;div ng-show="editingData[x.id]"&gt;&lt;input   type="text" ng-model="x.userId" /&gt;&lt;/div&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;div&gt;{{x.id}}&lt;/div&gt;
  
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;div ng-hide="editingData[x.id]"&gt;{{x.title}}   &lt;/div&gt;
                              &lt;div ng-show="editingData[x.id]"&gt;&lt;input   type="text" ng-model="x.title" /&gt;&lt;/div&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;div ng-hide="editingData[x.id]"&gt;{{x.completed}} &lt;/div&gt;
                              &lt;div ng-show="editingData[x.id]"&gt;&lt;input type="text" ng-model="x.completed" /&gt;&lt;/div&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;button ng-hide="editingData[x.id]" ng-  click="modify(x)"&gt;Modify&lt;/button&gt;
                              &lt;button ng-show="editingData[x.id]" ng-    click="update(x)"&gt;Update&lt;/button&gt;
                              &lt;button ng-hide="viewField"&gt;Remove&lt;/button&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
   &lt;/div&gt;
  &lt;div&gt;
  &lt;div&gt;ADD NEW DETALS&lt;/div&gt;
  &lt;form class="form-horizontal" role="form" ng-submit="addRow()"&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label"&gt;USER ID&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
          &lt;input type="text" class="form-control" name="userId"
              ng-model="x.userId" /&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label"&gt;ID&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
          &lt;input type="text" value=201 class="form-control" name="id"
              ng-model="x.id" /&gt;
      &lt;/div&gt; &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label"&gt;TITLE&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
          &lt;input type="text" class="form-control" name="title"
              ng-model="x.title" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="form-group"&gt;
      &lt;label class="col-md-2 control-label"&gt;COMPLETED&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
          &lt;input type="text" class="form-control" name="completed"
              ng-model="x.completed" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;                                
      &lt;div style="padding-left:110px"&gt;
          &lt;input type="submit" value="Submit" class="btn btn-primary"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Controllers.js </p>
  
  <pre><code>var app = angular.module('myApp', []);
   app.controller('customersCtrl', function($scope, $http) {
   $scope.userId = [];
   $http.get("").success(function   (response) 
    {$scope.userId = response});
  
    $scope.editingData = [];
  
    for (var i = 1, length = $scope.userId.length; i &lt; length; i++) {
    $scope.editingData[$scope.userId[i].id] = false;
    }
  
  
    $scope.modify = function(x){
      $scope.editingData[x.id] = true;
    };
  
  
     $scope.update = function(x){
      $scope.editingData[x.id] = false;
     };
  
  
     });
  
  
    $scope.addRow =function( event ){
    if (event.success) {
    $http.post("", {     'userId':$scope.userId, 'id': $scope.id,  'title':$scope.title, 'completed':$scope.completed })
    .success(function (response) 
    {$scope.userId = response;
    });
     }
     }
  </code></pre>
  
  <p>Style.css</p>
  
  <pre><code>body {
  </code></pre>
  
  <p>background-color: #eef;<br>
      }
      #tabs {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;</p>
  
  <pre><code> }
  
    table, th , td {
   border: 1px solid grey;
   border-collapse: collapse;
    padding: 4px;
    font-family: arial;
  
    }
  
    td {
  text-align: center;
    }
  
   th {
   background: darkblue;
   color: white;
   text-align: center;
     }
     /*Style for Alternate Rows*/
     table tr:nth-child(odd) {
      background-color: #C2EBC3;
      }
      table tr:nth-child(even) {
      background-color: #FFFFFF;
      }
  </code></pre>
  
  <p>Simple example</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
     &lt;head&gt;
      &lt;script src=     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
  
  
    &lt;body ng-app="MyApp"&gt;
      &lt;input type="text" ng-model="text" placeholder="Enter text"/&gt;
       &lt;p&gt;Input: {{ text }}&lt;/p&gt;
       &lt;p&gt;Filtered input: {{ text | reverse }}&lt;/p&gt;
  
  
  
            &lt;my-directive&gt;&lt;/my-directive&gt;
  
        &lt;script type="text/javascript"&gt;
        app.angular.module('myApp', [])
       .directive('myDirective', function() {
      return {
        restrict: 'E',
         template: '&lt;a href="http://google.com"&gt;
       Click me to go to Google&lt;/a&gt;'
         }
        });
  
  
        var app = angular.module("MyApp", []);
  
       app.filter("reverse", function() {
      return function(input) {
     var result = "";
      input = input || "";
     for (var i=0; i&lt;input.length; i++) {
    result = input.charAt(i) + result;
     }
       return result;
      };
     });
     &lt;/script&gt;
     &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  
  <p>For reference you can use this links</p>
  
  <hr>
  
  <p>"<a href="http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/" rel="nofollow noreferrer">http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/</a>"
  "<a href="https://stackoverflow.com/questions/25365378/push-json-data-to-existing-array-in-angular-js">Push json data to existing array in angular js</a>"
  "<a href="https://stackoverflow.com/questions/24685988/adding-new-row-of-fields-with-angularjs-ng-repeat">Adding new row of fields with AngularJS ng-repeat</a>"</p>
  
  <h2>"<a href="https://stackoverflow.com/questions/15369726/angularjs-update-json">Angularjs - Update JSON</a>"</h2>