Ajouter, Supprimer & mise à Jour des données spécifiques En JSON dans AngularJS

J'ai tiré des données à partir du fichier json. Maintenant, ses affiché sur les DOM.
Sur la Page HTML, j'ai trois option 1) Modifier les Données 2) Effacer des Données & 3) Ajouter de Nouvelles Données.

Comment réaliser cela en utilisant AngularJS Code? c'est à dire sur la modification de nom, il doit mettre à jour mon objet JSON. Sur la Suppression de la ligne, il faut supprimer cette ligne dans les données JSON. et aussi, Si je clique sur Ajouter un Nouveau, puis entré les données seront ajoutées à JSON.

Mon Code est comme ci-dessous.
L'importation de données par fichier json et l'affichage sur les 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
    });
});

De sortie de ce code est correct comme l'image ci-dessous.
Ajouter, Supprimer & mise à Jour des données spécifiques En JSON dans AngularJS
Objet JSON comme ci-dessous.

    {   
   "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"
      }
   ]
}

Avez-vous essayé quelque chose? Quel est le problème spécifique que vous êtes confrontés?
Essayez ce module ng-table.com/#/editing/demo-inline Il Est super facile tu utiliser. Mais si vous souhaitez l'utiliser, vous propres méthodes écrites dans angulaire, laissez-moi savoir. Je vais poster plus de code
si vous avez besoin pour économiser de l'objet javascript $scope.details dans le fichier JSON, il suffit d'utiliser $http.mettre
supprimer est assez facile ...voir la stackoverflow.com/questions/15453979/... . Combinez cela avec un appel au serveur
Merci de donner de démonstration de ng-table. cependant, il s'agit de la rangée de table, mais comment mettre à jour et effectuer l'opération sur l'objet JSON. Une fois que j'ai final JSON puis je vais appeler $http.mis à enregistrer dans mon dossier. Mais avant cela, j'ai besoin finale de fichier JSON.

InformationsquelleAutor Khilen Maniyar | 2016-01-17

angularjs json

Je voudrais faire comme ceci:

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>

C'est juste un prototype, pas testé, mais il devrait vous aider à comprendre l'idée o une liaison bidirectionnelle angulaire.

InformationsquelleAutor ssuperczynski

Voici mon approche de cette exigence. Permettez-moi de savoir si toute amélioration supplémentaire peut être ajouté. L'ensemble du code peut être trouvé à l'URL ci-dessous:

Angulaire Enregistrer, mettre à Jour et Supprimer

L'exemple des captures d'écran du code peut être trouvé ici...

JS:

controller:
'use strict';
function MainController($scope, SharedService, ngDialog) {
$scope.account_type_selected = "Savings";
$scope.sharedService = SharedService;
$scope.savingsMain = [];
$scope.checkingsMain = [];
$scope.addToCheckingsAccounts = {};
$scope.addToSavingsAccounts = {};
$scope.setAccountType = function (type) {
if (type === "allAccounts") {
$scope.showSavings = true;
$scope.showCheckings = true;
} else if (type === "savingsAccounts") {
$scope.showSavings = true;
$scope.showCheckings = false;
} else if (type === "checkingAccounts") {
$scope.showSavings = false;
$scope.showCheckings = true;
}
$scope.account_type_selected = type;
};
$scope.$watch('savingsMain', function ($scope) {
return $scope.savingsMain;
});
$scope.selectedAccountType = function (showAccount) {
console.log(showAccount);
if (showAccount === "Savings") {
$scope.sharedService.accountType = "Savings";
} else {
$scope.sharedService.accountType = "Checkings";
}
};
$scope.saveAccounts = function () {
if ($scope.sharedService.accountType === "Savings") {
$scope.addToSavingsAccounts = {
"account_type": $scope.sharedService.accountType,
"amount": $scope.sharedService.amount,
"date": $scope.sharedService.date,
"maturity": $scope.sharedService.maturity
};
$scope.showSavings = true;
$scope.savingsMain.push($scope.addToSavingsAccounts);
} else {
$scope.addToCheckingsAccounts = {
"account_type": $scope.sharedService.accountType,
"amount": $scope.sharedService.amount,
"bic": $scope.sharedService.BIC,
"iban": $scope.sharedService.IBAN
};
$scope.showCheckings = true;
$scope.checkingsMain.push($scope.addToCheckingsAccounts);
}
ngDialog.close();
};
$scope.deleteDataFromSharedService = function (accountType, item) {
if (accountType === "Savings") {
$scope.savingsMain = _.without($scope.savingsMain, _.findWhere($scope.savingsMain, { date: item }));
} else if (accountType === "Checkings") {
$scope.checkingsMain = _.without($scope.checkingsMain, _.findWhere($scope.checkingsMain, { bic: item }));
}
};
$scope.closeDialog = function () {
ngDialog.close();
};
$scope.accountTypeModel = [];
$scope.prop = {
"type": "select",
"name": "account_type",
"value": $scope.sharedService.accountType,
"accountTypeData": ["Savings", "Checkings"]
};
}

HTML:

<form ng-controller="MainController">
<div class="page-header">
<h1>Angular-Save-Update-Delete</h1>
</div>
<div class="content-wrapper">
<div class="sidebar">
<table>
<tbody>
<tr>
<td>
<button ng-click="setAccountType('allAccounts')" ng-model="allAccounts" class="ng-pristine ng-untouched ng-valid ng-empty">All</button>
</td>
</tr>
<tr>
<td>
<button ng-click="setAccountType('savingsAccounts')" ng-model="savingsMain" class="ng-pristine ng-valid ng-not-empty ng-touched">Savings</button>
</td>
</tr>
<tr>
<td>
<button ng-click="setAccountType('checkingAccounts')" ng-model="checkingsMain" class="ng-pristine ng-untouched ng-valid ng-not-empty">Checkings</button>
</td>
</tr>
<tr>
<td>
<button class="create-account-btn-class" 
type="button" 
ng-dialog="app/views/create-account-template.html" 
ng-dialog-data="" 
ng-dialog-class="ngdialog-theme-default" 
ng-dialog-scope="this" 
plain=false
showClose=true
closeByDocument=true
closeByEscape=true
ng-dialog-show-close="false">New Account</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="right-content">
<div id="savingsTemplate" templateurl="app/views/savings.html" ng-show="showSavings" include-template=""></div>
<div id="checkingsTemplate" templateurl="app/views/checkings.html" ng-show="showCheckings" include-template=""></div>
</div>
</div>
</form>

InformationsquelleAutor DILIP KOSURI

Vous devez vous connecter pour publier un commentaire.