如何将记录添加到 angular js 中的某个 JSON 文件？

Question

I was trying to add some records in JSON file by using angular js but i was getting some error ,may be due to my bad code.我试图通过使用 angular js 在 JSON 文件中添加一些记录，但出现了一些错误，可能是由于我的代码错误。

Please tell me, how should i do this?请告诉我，我该怎么做？

This my plunker sample code in this plunker这是我在这个 plunker 中的plunker示例代码

 myApp.controller('ToddlerCtrl', function ($scope,$http) {

  $http.get('taskList.json').success(function (data){
    $scope.tasks = data;
});

   $scope.addEmp = function(){

    $scope.bla="sijs";
    $scope.tasks.push({ task:$scope.empName, priority:$scope.empCity, status:$scope.empState });


  var dataObj = {
            task : $scope.empName,
            priority : $scope.empCity,
            status:$scope.empState
    };  
    var res = $http.post('taskList.json', dataObj);
    res.success(function(data, status, headers, config) {
        $scope.message = data;
    });
    res.error(function(data, status, headers, config) {
        alert( "failure message: " + JSON.stringify({data: data}));
    }); 

}




});

Answer 1

The controller code is good, the only issue is that your form to add the new tasks are not within the div where you defined your controller so it will not inherit the scope from it, therefore the bindings empName, empCity, empState and addEmp won't work as they are part of the ToddlerCtrl.控制器代码很好，唯一的问题是您添加新任务的表单不在您定义控制器的 div 内，因此它不会从它继承范围，因此绑定 empName、empCity、empState 和 addEmp 将获胜因为它们是 ToddlerCtrl 的一部分，所以无法正常工作。

Your html needs to look like this:您的 html 需要如下所示：

<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
     <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hardi's Task Analyzer</h1>

    <div ng-controller="ToddlerCtrl">
      <h2>Toddlers</h2>

      <!-- Add new task form -->
     <label>Add  Task Name</label><input type="text" ng-model="empName">
      <label>Add Priority</label><input type="text" ng-model="empCity">
      <label>Add Status</label><input type="text" ng-model="empState">
     <button  ng-click="addEmp()">Add <i class="icon-plus"></i></button>
      <br /><br />
      {{empName}}

      <table>
        <tr>
          <th>Task Name</th>
          <th>Priority</th>
          <th>Status</th>
        </tr>
        <tr ng-repeat="task in tasks">
          <td>{{task.task}}</td>
          <td>{{task.priority}}</td>
          <td>{{task.status}}</td>
        </tr>
      </table>
    </div>
  </body>

</html>

Please see updated plunker here: http://plnkr.co/edit/pMCFSilYUC1QHH6FUl6G?p=preview请在此处查看更新的 plunker： http ://plnkr.co/edit/pMCFSilYUC1QHH6FUl6G?p=preview

This will add them to the list in the view and the controller, however to add them to the JSON file you will need to implement a server side action using NodeJS, ASP.NET, Java, Ruby or some other server side technology to access and edit the file.这会将它们添加到视图和控制器中的列表中，但是要将它们添加到 JSON 文件中，您需要使用 NodeJS、ASP.NET、Java、Ruby 或其他一些服务器端技术来实现服务器端操作以访问和编辑文件。 You will then need to add a save button to send the new list to the server to update the JSON file.然后，您需要添加一个保存按钮以将新列表发送到服务器以更新 JSON 文件。 It will be better to implement this with a database rather than a JSON file though to manage concurrency easily.使用数据库而不是 JSON 文件来实现这一点会更好，尽管可以轻松管理并发性。

如何将记录添加到 angular js 中的某个 JSON 文件？

问题描述

1 个解决方案

解决方案1
0 2015-10-18 11:49:42

如何将记录添加到 angular js 中的某个 JSON 文件？

问题描述

1 个解决方案

解决方案1 0 2015-10-18 11:49:42

解决方案1
0 2015-10-18 11:49:42