Angular Js JSON JavaScript，使用按鈕編輯json數據

Question

這是我的plunker代碼。當我點擊編輯按鈕時，細節應該被編輯。 Here是我的完整Plunker項目的鏈接。

<title>Edit and Update JSON data</title> 
    <div> 
    {{myTestJson.name}} 
    <table><tbody> 
      <tr ng-repeat="(key, value) in myTestJson.MyTest[id].Main track by $index" > 
      <td><label>{{key}}: </label> 
     <input placeholder="" type="text" ng-model="myTestJson[key]"> 
      </td> 
       </tr> 
      </tbody> 
     </table> 
     <button value="Update and Save" id="saveButtonId" ng-click="saveUpdate()">Update/Save</button> 
    </div> 

Answer 1

試試這個::

var myApp = angular.module('myApp', []); 

myApp.controller('studentController', function($scope, $http) { 
    var url = "Student.json"; 
    $http.get(url).success(function(response) { 
    $scope.students = response; 
    }); 

    $scope.removeEle = function(arra, index) { 
    arra.splice(index, 1); 

    }; 

}); 

    <div ng-controller="studentController"> 
    <h1>Student Information </h1> 

    <table> 
     <tr> 
     <th>Name</th> 
     <th>Roll No</th> 
     <th>Percentage</th> 
     </tr> 
     <tr ng-repeat="student in students"> 
     <td> 
      <input type="text" ng-model="student.Name" ng-show="student.edit"> 
      <span ng-hide="student.edit">{{ student.Name }}</span> 
     </td> 
     <td> 
      <input type="text" ng-model="student.RollNo" ng-show="student.edit"> 
      <span ng-hide="student.edit">{{ student.RollNo }}</span> 
     </td> 
     <td> 
      <input type="text" ng-model="student.Percentage" ng-show="student.edit"> 
      <span ng-hide="student.edit">{{ student.Percentage }}</span> 
     </td> 
     <td> 
      <button id="button2" ng-hide="student.edit" ng-click="student.edit = true">Edit</button> 
<button id="button4" ng-hide="student.edit" ng-click="removeEle(students, $index)">Delete({{$index}})</button> 
      <button id="button3" ng-show="student.edit" ng-click="student.edit = false">Submit</button> 
     </td> 
     </tr> 
    </table> 
    </div>