angularjs - 在 AngularJS 中添加、删除和更新 JSON 中的特定数据

Question

我已从 json 文件中提取数据。现在它显示在 DOM 上。在 HTML 页面上，我有三个选项 1) 编辑数据 2) 删除特定数据 & 3) 添加新数据。

如何使用 AngularJS 代码执行此操作？即在编辑名称时，它应该更新我的 JSON 对象。在删除行时，应该删除 JSON 数据中的该行。如果我单击“添加新项”，则输入的数据将添加到 JSON。

我的代码如下。通过json文件导入数据并显示在DOM上

.controller('MainCtrl', function ($scope, $http) {
  $http.get('data/home.json').
    success(function(data, status, headers, config) {
      $scope.details = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});  

此代码的输出是正确的，如下图所示。 JSON 对象如下。

    {   
   "status":"success",
   "adformat":[   
      {   
         "adformat_id":1,
         "name":"Format 1",
         "size":"300x250"
      },
      {   
         "adformat_id":2,
         "name":"Format 2",
         "size":"320x250"
      },
      {   
         "adformat_id":3,
         "name":"Format 3",
         "size":"320x480"
      }
   ]
}

Answer 1

我会这样做:

MainCtrl.js

(function () {
    'use strict';

    angular
            .module('app')
            .controller('MainCtrl', MainCtrl);

    MainCtrl.$inject = ['$scope', 'MainFactory'];

    function MainCtrl($scope, MainFactory) {

        $scope.details = MainFactory.details;

        function init() {
            MainFactory.get();
        }

        init();

        $scope.detailsModel = {
            "adformat_id": 1,
            "name": "Format 1",
            "size": "300x250"
        };

        $scope.add = function () {
            $scope.details.push($scope.detailsModel);
        };

        $scope.delete = function (index) {
            $scope.details.splice(index, 1);
        };

        $scope.edited = -1;
        $scope.editedModel = {
            "adformat_id": 0,
            "name": "",
            "size": ""
        };

        $scope.edit = function (index) {
            $scope.edited = index;
        };

        $scope.finishEdit = function (index) {
            $scope.details[index] = $scope.editedModel;
            $scope.edited = -1;
        };
    }
})();

MainFactory.js

(function () {
    'use strict';

    angular
            .module('app')
            .factory('MainFactory', MainFactory);

    MainFactory.$inject = [];

    function MainFactory() {

        var self = this;

        self.details = [];
        self.get = $http.get('data/home.json')
                .then(function (response) {
                    self.details = response.data;
                }).catch(function (error) {
                    // log error
                });

        return self;
    }
})();

index.html

<div ng-app="app">
    <div ng-controller="MainCtrl">
        <table>
            <tbody>
            <tr ng-repeat="details in detail">
                <!-- show-->
                <td ng-hide="edited === $index">{{detail.adformat_id}}</td>
                <td ng-hide="edited === $index">{{detail.name}}</td>
                <td ng-hide="edited === $index">{{detail.size}}</td>
                <td ng-hide="edited === $index">
                    <button ng-click="edit($index)">Edit</button>
                    <button ng-click="delete($index)">Detele</button>
                </td>
                <!-- Edit-->
                <td ng-show="edited === $index">{{detail.adformat_id}}</td>
                <td ng-show="edited === $index"><input type="text" ng-model="editedModel.name"></td>
                <td ng-show="edited === $index"><input type="number" ng-model="editedModel.size"></td>
                <td ng-show="edited === $index">
                    <button ng-click="finishEdit($index, editedModel)">Save</button>
                    <button ng-click="delete($index)">Detele</button>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td>
                    <button ng-click="add()">Add</button>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

它只是原型(prototype)，未经测试，但它应该可以帮助您理解 Angular 中双向绑定(bind)的想法。