无法将新数据添加到我的简单JSON（$ scope.customers）

我刚刚开始了解angular.js，所以我真的是一个新手。我不知道是否有语法问题或任何其他简单的问题，但我无法做到这一点。

我已从Dan Wahlin's tutorial开始。我会用Rodrigo Branas的书。

<html ng-app="customersApp"> 
<head> 
    <title>App</title> 
    <script src="angular.min.js"></script> 
    <script> 
     var app = angular.module('customersApp', []); 

     app.controller('CustomersController', function($scope){ 
      $scope.customers = [ 
       {"id": 1, "name": "Yusuf", "age": 18}, 
       {"id": 2, "name": "Ahmetcan", "age": 17}, 
       {"id": 3, "name": "Ender", "age": 20}, 
       {"id": 4, "name": "Batuhan", "age": 16}, 
      ]; 

      $scope.add = function (name){ 
       $scope.customers.push(angular.copy(name)); 
       delete $scope.name; 
      }; 
     }); 
    </script> 
</head> 
<body> 
    <input type="text" id="name" ng-model="nameTxt"/> <input ng-click="add(nameTxt)" type="submit"/> 
    <table ng-controller="CustomersController"> 
     <tr ng-repeat="cust in customers | filter:nameTxt"> 
      <td>{{cust.name}}</td> 
      <td>{{cust.age}}</td> 
     </tr> 
    </table> 
    <br/> 
    You are looking for: {{nameTxt}} 
</body> 
</html>

除了$ scope.add函数，一切都很完美。我尝试的是获取nameTxt并将其添加到$ scope.customers。

我认为问题出在JSON数据结构和我试图添加的数据之间。但只是不知道如何解决这个问题。目前，感谢..

编辑：Here is the example of Rodrigo..

来源

2014-10-29 Yusuf Ali Bozkır

问题的原因是，我使用“NG-控制器“参数。我已经定义了标签内部，但输入不在表格内部，因为它必须是。

我已经改变了3行并解决了问题。

<body>

到

<body ng-controller="CustomersController">

所以删除从表中的NG-控制器参数，下面编辑$ scope.add功能。

$scope.add = function (name){ 
       $scope.customers.push({"name": name}); 
      };

我不知道为什么angular.copy不起作用。

来源

2014-10-29 09:36:28

遵循以下步骤：

<input type="text" id="name" ng-model="nameTxt"/> <input ng-click="add()" type="submit"/> 

$scope.add = function(){ 
    $scope.customers.push({"id":$scope.customers.length,"name":nameTxt,"age":"---fill---"}); 
};

来源

2014-10-29 08:59:36

我真的需要那么多的代码？当我手动添加angularjs允许我添加没有ID和年龄.. – 2014-10-29 09:02:26

好吧，但你不能'ng-repeat'当你添加这样的？ – 2014-10-29 09:04:26

为什么不呢？有什么区别？ – 2014-10-29 09:07:18

使用此代码：

$scope.add = function (name){ 
       $scope.customers.push({'id':"",'name':name,'age':""}); 

      };

来源

2014-10-29 09:02:12

不起作用..对不起 – 2014-10-29 09:04:34

你必须输入了控制器的范围，你也必须推同一类型的对象客户李ST。您必须相应地计算项目的Id。

我已经对JsFiddle

一个简单的例子中的HTML

<div ng-controller="CustomersController"> 
<input type="text" id="name" ng-model="nameTxt" /> 
<input ng-click="add(nameTxt)" type="submit" /> 
<table > 
    <tr ng-repeat="cust in customers | filter:nameTxt"> 
     <td>{{cust.name}}</td> 
     <td>{{cust.age}}</td> 
    </tr> 
</table> 
<br/>You are looking for: {{nameTxt}}</div>

守则

var app = angular.module('customersApp', []); 

app.controller('CustomersController', function ($scope) { 
    $scope.customers = [{ 
     "id": 1, 
     "name": "Yusuf", 
     "age": 18 
    }, { 
     "id": 2, 
     "name": "Ahmetcan", 
     "age": 17 
    }, { 
     "id": 3, 
     "name": "Ender", 
     "age": 20 
    }, { 
     "id": 4, 
     "name": "Batuhan", 
     "age": 16 
    }]; 

    $scope.add = function (name) { 
     $scope.customers.push({"id": 5, "name": name, "age": 99}); 
    }; 
});

来源

2014-10-29 09:07:40 Max

同样的结论，但太迟了1分钟。这里的plunkr：http://plnkr.co/edit/2Bg5paMbQVVZD92gupyU？p =预览 – rllola 2014-10-29 09:10:52

我还会添加以确保您的控制器将您在HTML中定义的所有功能都包含在其中。在你的情况下，add（nameTxt）在你的控制器div之外，但Max在他的演示中纠正了它。 – rllola 2014-10-29 09:13:55

我刚刚意识到这不是关于JSON，而是关于我在ng-controller =“CustomersController”中定义的位置。在标签里面定义这个参数之后，问题就解决了。 – 2014-10-29 09:31:19

<div ng-app="customersApp"> 
<input type="text" id="name" ng-model="nameTxt"/> <input ng-click="add(nameTxt)" type="submit"/> 
    <table ng-controller="CustomersController"> 
     <tr ng-repeat="cust in customers | filter:nameTxt"> 
      <td>{{cust.name}}</td> 
      <td>{{cust.age}}</td> 
     </tr> 
    </table> 
    <br/> 
    You are looking for: {{nameTxt}} 
</div> 

    var app = angular.module('customersApp', []); 

    app.controller('CustomersController', function($scope){ 
     $scope.customers = [ 
      {"id": 1, "name": "Yusuf", "age": 18}, 
      {"id": 2, "name": "Ahmetcan", "age": 17}, 
      {"id": 3, "name": "Ender", "age": 20}, 
      {"id": 4, "name": "Batuhan", "age": 16} 
     ]; 

     $scope.add = function (name){ 
     $scope.customers.push({"id":'',"name":name,"age":''}); 

     }; 
    });

来源

2014-10-29 09:15:40 user3811714

无法将新数据添加到我的简单JSON（$ scope.customers）

回答

相关问题