AngularJS вставка данных в файл JSON - PullRequest
Новая
       1

AngularJS вставка данных в файл JSON

0 голосов
/ 29 мая 2018

У меня есть 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 параметры: нг-app = "ajsprogram", ng-controller = "externalcont".

Как добавить в него новые данные из формы через функцию при отправке ?

Структура данных почти такая же: 

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

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Спасибо, Судхир.Это именно то, что я хотел.Мне просто нужно, чтобы это было в отдельных файлах.У меня есть 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>
0 голосов
/ 30 мая 2018

Вы можете создать массив и просто вставить данные формы в этот массив следующим образом: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...