javascript - AngularJS 推送项目不起作用

Question

我已将所有必需的文件放入一个文件中。我想在用户单击按钮时将项目插入数组。内容如下:

当我点击按钮时，没有任何反应。此外，数据不会重复/循环，并且 {{}} 以 Angular 显示，这意味着存在问题。

<script type="text/javascript" src="angular.js" ></script>
        <div data-ng-app="App">
            <div data-ng-controller="MyController">
                <ul data-ng-repeat="one in names">
                    <li>{{ one.first }}</li>
                </ul>
            </div>
        </div>

        <input type="text" data-ng-model="Namer.name"/>
        <input type="submit" data-ng-click="AddName()"/>


<script type="text/javascript">
    var App = angular.module("App", []);

    App.controller("MyController", function($scope){
        $scope.names = [
            { first : "Thomas"},
            { first  : "Geferson"},
            { first  : "Jenny"},
            { first  : "Maria"},
        ];

        $scope.AddName = function(){
            $scope.names.push({
                name : $scope.Namer.name;
            });
        };
    });
</script>

Answer 1

Working DEMO

var App = angular.module("App", []);

App.controller("MyController", function ($scope) {
    $scope.names = [{
        first: "Thomas"
    }, {
        first: "Geferson"
    }, {
        first: "Jenny"
    }, {
        first: "Maria"
    }];

    $scope.AddName = function () {
        $scope.names.push({
            first: $scope.Namer.name
        });
    };
});

您需要将 data-ng-click 移动到 Controller 中。您还遇到了一些语法问题。这也是我修复的(也可以使用 IE)

<div data-ng-app="App">
    <div data-ng-controller="MyController">
        <ul data-ng-repeat="one in names">
            <li>{{ one.first }}</li>
        </ul>
        <input type="text" data-ng-model="Namer.name" />
        <input type="submit" data-ng-click="AddName()" />
    </div>
</div>