-2

我有json文件：

test.json: 

{
    "MyTest": [{
        "Main": {
            "static": {
                "name": "TestName1"
            },
            "dynamic": {
            "testkey01": "testkey01data",
            "testkey02": 40,
            "testkey03vals": [1, 1, 1]
        }}
    }, {
        "Main": {
            "static": {
                "name": "TestName2"
            },"dynamic": {
            "testkey01": "test01value",
            "testkey03": 10,
            "testflags": ["Test"]
        }}
    }, {
        "Main": {
            "static": {
                "name": "TestName3"
            },"dynamic": {
            "testkey01": "testkey01value for TestName3",
            "testnumber": 30
        }}
    }]
}

我想使用 AngularJS 对此 json 数据执行添加、编辑/更新和删除操作。

我做了以下事情：

索引.html：

<!DOCTYPE html>
    <html>
      <head>
       <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
       <script src="app.js"></script> 
      </head>
      <body ng-app="myApp">
        <div ng-controller="TestCtrl">
            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Edit</th>
                  <th>Add</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="(key, value) in myTestJson.MyTest" >
                  <td>{{value.Main.static.name}} </td>
                  <td><a ng-href="editName.html">Edit</a></td>
                  <td><button id="button1"  ng-click="add(value.Main.static.name)">Add</button></td>
                </tr>
              </tbody>
            </table>
        </div>
        <br><br>
        <br>
        <table border="1" class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            <tr  ng-repeat="name in jsonNames"  >
              <td>{{name}}</td>
              <td><button id="button1" name="singlebutton" ng-click="delete(name)">Delete</button></td>
            </tr>
            <tr ng-hide="myTestJson.MyTest.length">
              <td colspan="3">
                <p>No Names</p>
              </td>
            </tr>
          </tbody>
        </table>
      </body>
    </html>

编辑名称.html：

<!DOCTYPE html>
    <html>
      <title>Edit and Update JSON data</title>
        <div>
           <table><tbody>
                <tr ng-repeat="(key, value) in myTestJson.MyTest.Main.dynamic" >
                  <td><label>{{key}}: </label> 
            <input placeholder="" type="text" ng-model="value">
                   </td>
                    </tr>
                </tbody>
            </table>
            <button value="Update and Save" id="saveButtonId" ng-href="index.html" ng-click="finishEdit">Update/Save</button>
        </div>
    </html>

应用程序.js：

var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope, $http ) {
     $http.get('test.json').success(function(response) {
        $scope.myTestJson = response;
       // console.log(JSON.stringify(response));

      $scope.add = function (){
        alert("add is called");
        //$scope.myTestJson.push($scope.jsonNames);
        $scope.myTestJson.push($scope.myTestJson, jsonNames);
      };
       $scope.delete = function (index){
        $scope.myTestJson.splice(index,1);
        alert("JSON Name is deleted");
      }
     $scope.saveUpdate = function (index) {
            $scope.myTestJson[index] = $scope.dynamiceditedModel;
            $scope.edited = -1;
        };
        //$scope.dynamiceditedModel=$scope.myTestJson;
    });
  });

一个。如果我单击Add按钮：则应在我的第二个表中添加相应的 JSON 名称数据。

湾。如果我单击Edit按钮：则相应选择的 JSON 名称“ dynamic”字段选项应该是可编辑的（打开editName.html），然后应该在单击更新/保存按钮时保存（然后它应该被重定向到index.html）。

C。如果我单击Delete按钮：则应删除相应的 JSON 名称。

我创建了Plnkr。我请求大家帮我解决这个问题，我该如何执行这些操作。提前致谢。

4

2 回答 2

2

这是基于我们讨论的答案。可能会很长，因为我处理了所有文件并添加了它们，

首先，

索引.html

<!DOCTYPE html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>

  <script src="app.js"></script>
  <script src="test.json"></script>
</head>
<body ng-app="myApp">    
  <ui-view></ui-view>    
 </body>

</html>

应用程序.js

var app = angular.module('myApp', ['ui.router']);
    app.controller('TestCtrl',function($scope, $http,$state,$stateParams,filterFilter,$rootScope) {
        $rootScope.jsonNames = []
        $rootScope.filteredArray = []
        console.log($rootScope.myTestJson)         
        if($rootScope.myTestJson == undefined)
        {
            $http.get('test.json').success(function(response) {
                $rootScope.myTestJson = response;
            })
        }    
           // console.log(JSON.stringify(response));

          $scope.add = function (name){
            alert("add is called");
            //$scope.myTestJson.push($scope.jsonNames);
            $rootScope.jsonNames.push(name);
            console.log($rootScope.jsonNames)
          };
           $scope.delete = function (index){
            $rootScope.jsonNames.splice(index,1);
            alert("JSON Name is deleted");
          }

          console.log($stateParams.edit != undefined)
          if($stateParams.edit != undefined){
            console.log($rootScope)
            $rootScope.id = $stateParams.edit
          }
         $scope.saveUpdate = function (index) {
                console.log($rootScope.myTestJson)
                $state.go('home')
            };
            //$scope.dynamiceditedModel=$scope.myTestJson;

    });
    app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'main.html',
            controller: 'TestCtrl',
        })
        .state('edit', {
            url: '/edit/:edit',
            templateUrl: 'edit.html',
            controller: 'TestCtrl',
        });

});

main.html

<div>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Edit</th>
        <th>Add</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(key, value) in myTestJson.MyTest" >
        <td>{{value.Main.static.name}} </td>
        <!-- <td>{{$index}} </td> -->

        <td><a ui-sref="edit({edit: $index})">Edit</a></td>
        <td><button id="button1"  ng-click="add(value)">Add</button></td>
      </tr>
    </tbody>
  </table>

  <br><br>
  <br><p>Second Table:</p>
  <table border="1" class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr  ng-repeat="(key, value) in jsonNames"  >
        <td>{{value.Main.static.name}}</td>
        <td><button id="button1" name="singlebutton" ng-click="delete($index)">Delete</button></td>
      </tr>
      <tr ng-hide="jsonNames.length > 0">
        <td colspan="3">
          <p>No Names</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

编辑.html

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

json文件与它相同。

请整合这个，我会在你想要的地方解释它。

于 2016-09-23T08:51:48.613 回答
1

那里有数十亿个错误。您绝对应该从一些非常基本的东西开始，并一一尝试:)。我们都在学习，练习需要时间，所以不要误会。

我修复了你的添加/删除错误，你可以在这里找到它的工作示例

http://plnkr.co/edit/fPjll5WqgrWCR00TUoaK?p=preview

更具体地说，我改变了什么：

var app = angular.module('myApp', []);
    app.controller('TestCtrl',function($scope, $http ) {
      // created new scope variabile
      $scope.table2 = [];
         $http.get('test.json').success(function(response) {
            // removed functions from this scopes, there is no reason for it
            $scope.myTestJson = response;
         });

          $scope.add = function (name){   
            // giving argument to this function
            // pushing it to new variabile instead of old one
            $scope.table2.push(name);
          };
           $scope.delete = function (name){
             // argument name you was sending was just name
             // you need to find index of it in array
             index = $scope.table2.indexOf(name);
             // and then splice it
             $scope.table2.splice(index,1);
          }
          $scope.saveUpdate = function (index) {
                // I didnt get to this..
                $scope.myTestJson[index] = $scope.dynamiceditedModel;
                $scope.edited = -1;
            };            
      });

在html中我改变了这个：

  // You had whole second table out of any controller
  <body ng-app="myApp" ng-controller="TestCtrl">
于 2016-09-22T12:35:19.113 回答