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

Question

我试图通过使用 angular js 在 JSON 文件中添加一些记录，但出现了一些错误，可能是由于我的代码错误。

请告诉我，我该怎么做？

 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

控制器代码很好，唯一的问题是您添加新任务的表单不在您定义控制器的 div 内，因此它不会从它继承范围，因此绑定 empName、empCity、empState 和 addEmp 将获胜因为它们是 ToddlerCtrl 的一部分，所以无法正常工作。

您的 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>

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

这会将它们添加到视图和控制器中的列表中，但是要将它们添加到 JSON 文件中，您需要使用 NodeJS、ASP.NET、Java、Ruby 或其他一些服务器端技术来实现服务器端操作以访问和编辑文件。 然后，您需要添加一个保存按钮以将新列表发送到服务器以更新 JSON 文件。 使用数据库而不是 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