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>

Angular Js JSON JavaScript，使用按钮编辑json数据

1 个答案: