可以't向我的简单JSON($scope.customers）中添加新数据

can't add a new data to my simple JSON ($scope.customers)

本文关键字：customers 添加 新数据 数据 scope 我的 简单 可以 JSON      更新时间：2023-09-26

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

我从Dan Wahlin的教程开始。我会用罗德里戈·布拉斯的书。

<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数据结构和我试图添加的数据之间。但就是不知道该怎么解决。已经，谢谢。。

编辑：这是罗德里戈的例子。。

您的输入超出了控制器的范围，您还必须推送一个客户列表中相同类型的对象。您必须相应地计算项目的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});
    };
});

使用以下代码：

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

<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":''});
        };
    });

按照以下步骤操作：

<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---"});
};

问题的原因是我在哪里使用了"ng controller"参数。我已经在标签中定义了它，但输入不在表中，因为这是必须的

我改了3行，问题解决了。

<body>

至

 <body ng-controller="CustomersController">

因此，从表中删除了ng控制器参数，并编辑了$scope.add函数，如下所示。

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

我不知道为什么angular复制不起作用。

相关文章：