Angularjs 向JSON文件添加数据_Angularjs_Json

Angularjs 向JSON文件添加数据

angularjs json

Angularjs 向JSON文件添加数据,angularjs,json,Angularjs,Json,通过表单，我想将数据添加到JSON文件中。我该怎么做？我是否需要重新创建JSON文件，或者可以将数据添加到现有的JSON文件中 $http.post不起作用，所以它使用不当，或者我需要替换它 HTML文件 <body ng-app='app'> <div ng-init="getData()" ng-controller="listController"> <ul ng-repeat="detail in details">

通过表单，我想将数据添加到JSON文件中。我该怎么做？我是否需要重新创建JSON文件，或者可以将数据添加到现有的JSON文件中

$http.post不起作用，所以它使用不当，或者我需要替换它

HTML文件

<body ng-app='app'>      
    <div ng-init="getData()" ng-controller="listController">
        <ul ng-repeat="detail in details">
            <li>
                <a href="{{detail.url}}">{{detail.url}}</a>
            </li>
            <li>
                {{detail.description}}
            </li>
            <li>
                {{detail.author}}
            </li>
        </ul>
        <form method=POST ng-submit="submit()">
            <label for="lien">Lien :
                <input type="url" id="lien" ng-model="detail.url" placeholder="http://"/>
            </label>
            {{detail.url}}
            <br><br>
            <label for="description">Description :
                <textarea id="description" ng-model="detail.description"></textarea>
            </label>
            {{detail.description}}
            <br><br>
            <label for="auteur">Auteur :
                <input type="text" id="auteur" ng-model="detail.author"></input>
            </label>
            {{detail.author}}
            <p>{{detail}}</p>
            <input type="submit" id="submit" value="Submit" />
            <p>{{details}}</p>
        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="script.js"></script>
</body>

var app = angular.module("app", []);
app.controller("listController", ["$scope","$http",
function($scope,$http) {
    $scope.getData = function()
    {
        $http.get('youtube.json').then(function (response){
            $scope.details  = response.data;    
        });
    };
    $scope.submit = function()
    {
        $scope.details.push($scope.detail);
        $http.post('youtube.json', $scope.details);
    }
}]);

[
    {
        "url": "https://www.youtube.com/watch?v=E1NIJjTYq6U",
        "author": "Grafikart.fr",
        "description": "Salut tout le monde"
    },
    {
        "url": "https://www.youtube.com/watch?v=fOuKMuaGJ54&list=PLjwdMgw5TTLUDlJyx4yIPQjoI-w-7Zs1r",
        "author": "Grafikart.fr",
        "description": "Les directives"
    }
]

JSON文件

<body ng-app='app'>      
    <div ng-init="getData()" ng-controller="listController">
        <ul ng-repeat="detail in details">
            <li>
                <a href="{{detail.url}}">{{detail.url}}</a>
            </li>
            <li>
                {{detail.description}}
            </li>
            <li>
                {{detail.author}}
            </li>
        </ul>
        <form method=POST ng-submit="submit()">
            <label for="lien">Lien :
                <input type="url" id="lien" ng-model="detail.url" placeholder="http://"/>
            </label>
            {{detail.url}}
            <br><br>
            <label for="description">Description :
                <textarea id="description" ng-model="detail.description"></textarea>
            </label>
            {{detail.description}}
            <br><br>
            <label for="auteur">Auteur :
                <input type="text" id="auteur" ng-model="detail.author"></input>
            </label>
            {{detail.author}}
            <p>{{detail}}</p>
            <input type="submit" id="submit" value="Submit" />
            <p>{{details}}</p>
        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="script.js"></script>
</body>

var app = angular.module("app", []);
app.controller("listController", ["$scope","$http",
function($scope,$http) {
    $scope.getData = function()
    {
        $http.get('youtube.json').then(function (response){
            $scope.details  = response.data;    
        });
    };
    $scope.submit = function()
    {
        $scope.details.push($scope.detail);
        $http.post('youtube.json', $scope.details);
    }
}]);

[
    {
        "url": "https://www.youtube.com/watch?v=E1NIJjTYq6U",
        "author": "Grafikart.fr",
        "description": "Salut tout le monde"
    },
    {
        "url": "https://www.youtube.com/watch?v=fOuKMuaGJ54&list=PLjwdMgw5TTLUDlJyx4yIPQjoI-w-7Zs1r",
        "author": "Grafikart.fr",
        "description": "Les directives"
    }
]

该文件静态地提供给服务器，这就是为什么您可以调用

$http.get（'youtube.json'）

并访问它。因此，服务器提供了一个URL供您访问。要真正写入该文件，您仍然需要一个服务器来处理该请求，并写入该文件（如果其nodej带有“fs”模块）。除此之外，您不能从web访问文件系统：）我希望这有助于澄清问题。

您需要一些服务器端逻辑来持久化更改。您应该在服务器上使用PHP来实现这一点。查看

文件\u put\u contents（）

函数（）