Question

我刚刚开始学习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..

Answer 1

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

Answer 2

请按照以下步骤操作：

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

Answer 3

使用此代码：

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

            };

Answer 4

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

        };
    });

Answer 5

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

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

<body>

到

 <body ng-controller="CustomersController">

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

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

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

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

5 个答案: