Question

我的 HTML文件包含表单， json文件具有以下结构：

[
        {
           "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"

Answer 1

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

＆＃13;

<!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>

＆＃13;

Answer 2

谢谢，Sudhir。这正是我想要的。我只需要将它放在单独的文件中。我为所有脚本提供了 script.js ，它包含用于显示当前 airlines.json 文件中的内容的代码：

var prg = angular.module('ajsprogram', []);

prg.controller("outercont", function($scope, $http) {
        $http.get('airlines.json').success(function(data){
            $scope.info = data;
            $scope.airlineorder = 'airline';
        });
});

我需要在那里写的 insertData 函数。这是我的.html文件，其格式为：

<!DOCTYPE HTML>
<html ng-app="ajsprogram">
<head>
<title>Air Carriers</title>
   <script src="../lib/angular.js"></script>
   <script src="script.js"></script>
</head>
<style>
:root{text-align:center;}
</style>
<body>
<h2 align="center">Air Carriers</h2>
<div ng-controller="outercont">
<p align="center">
   <label>Search:</label><input type="search" ng-model="query"><br><br>
   <select ng-model="airlineorder">
         <option value="airline" selected>Airline Name</option>
         <option value="hub">Domestic Airport</option>
         <option value="callsign">Callsign</option>
   </select><br>
   <input type="radio" ng-model="direction" name="direction" checked>ASC<br>
  <input type="radio" ng-model="direction" name="direction" value="reverse">DESC
</p>
   <table align="center">
      <th>Airline</th><th>Hub</th><th>URL</th><th>Callsign</th>
      <tr ng-repeat="item in info | filter: query | orderBy: airlineorder: direction">
<td>{{item.airline}}</td><td>{{item.hub}}</td><td><a href="{{item.url}}">{{item.url}}</a></td><td>{{item.callsign}}</td>
</tr>
   </table>
</div>
<br>
New Airline Information:
<form onsubmit="newairline(an.value,hb.value,ur.value,cs.value)">
<table align="center">
<th>Airline:</th><th>Hub:</th><th>URL:</th><th>Callsign:</th>
<tr>
<td><input type="text" id="an" name="alname" value=""></td>
<td><input type="text" id="hb" size="3" maxlength="3" name="hub" value="" onkeyup="this.value=this.value.toUpperCase();"></td>
<td><input type="text" id="ur" name="url" value=""></td>
<td><input type="text" id="cs" name="cs" value="" onkeyup="this.value=this.value.toUpperCase();"></td>
</tr>
    <tr>
</table>
<input type="submit" value="new airline" style="cursor:pointer;">
</form>
</body>
</html>

AngularJS将数据插入JSON文件

2 个答案: