时间戳

首页 > 解决方案 > AngularJS将数据插入JSON文件

angularjs - AngularJS将数据插入JSON文件

问题描述

我有一个带有以下结构的表单和json 文件的HTML 文件：

[
        {
           "airline" : "British Airways",
           "hub"     : "LHR",
           "url"       : "http://britishairways.com",
           "callsign":"SPEEDBIRD"     
        },
        {
           "airline" : "Air France",
           "hub"     : "CDG",
           "url"       : "http://airfrance.com",       
           "callsign":"AIRFRANS"        
         },
        {
           "airline" : "Virgin Atlantic",
           "hub"     : "LGW",
           "url"       : "http://virginatlantic.com",
          "callsign":"VIRGIN"       
        },
        {
           "airline"   : "RyanAir",
           "hub"       : "DUB",
           "url"         : "http://ryanair.com",  
           "callsign":"RYANAIR"     
        },
        {
           "airline" : "ANA",
           "hub"     : "HND",
           "url"       : "http://ana.com.jp",
           "callsign":"ALL NIPPON"       
        },
        {
           "airline" : "Flydubai",
           "hub"     : "DXB",
           "url"       : "http://flydubai.com",
           "callsign":"SKY DUBAI"       
        }
]

AngularJS 参数： ng-app="ajsprogram", ng-controller="outercont"。

如何通过提交功能从我的表单中添加新数据？

数据结构几乎相同：

  "airline" : "Emirates",
   "hub"     : "DXB",
   "url"       : "http://emirates.com", 
   "callsign":"EMIRATES"

标签： angularjsjson

解决方案

您可以创建一个数组并简单地将表单数据推送到此数组中，如下所示：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="ajsprogram" ng-controller="outercont">
Airline: <input type="text" ng-model="formData.airline"><br>
Hub: <input type="text" ng-model="formData.hub"><br>
Url: <input type="text" ng-model="formData.url"><br>
Call sign: <input type="text" ng-model="formData.callsign"><br>
<button ng-click="insertData()">Insert</button>
<br>
The Data Is : {{array}}
</div>

<script>
var app = angular.module('ajsprogram', []);
app.controller('outercont', function($scope) {
	
    $scope.array = [
        {
           "airline" : "British Airways",
           "hub"     : "LHR",
           "url"       : "http://britishairways.com",
           "callsign":"SPEEDBIRD"     
        },
        {
           "airline" : "Air France",
           "hub"     : "CDG",
           "url"       : "http://airfrance.com",       
           "callsign":"AIRFRANS"        
         },
        {
           "airline" : "Virgin Atlantic",
           "hub"     : "LGW",
           "url"       : "http://virginatlantic.com",
          "callsign":"VIRGIN"       
        },
        {
           "airline"   : "RyanAir",
           "hub"       : "DUB",
           "url"         : "http://ryanair.com",  
           "callsign":"RYANAIR"     
        },
        {
           "airline" : "ANA",
           "hub"     : "HND",
           "url"       : "http://ana.com.jp",
           "callsign":"ALL NIPPON"       
        },
        {
           "airline" : "Flydubai",
           "hub"     : "DXB",
           "url"       : "http://flydubai.com",
           "callsign":"SKY DUBAI"       
        }
	];
    
    $scope.insertData = function(){
    	$scope.array.push($scope.formData);
    }
});
</script>

</body>
</html>

推荐阅读