将 Angular 数组数据推送/附加到 HTML 元素中？

Question

var nameApp = angular.module('nameApp', []);
        nameApp.controller('NameCtrl', function($scope){
            $scope.names = ['do the laundry','buy bananas','do the dishes','mow the lawn'];

            $scope.addName = function() {
                // also need to get new date and time stamp it on item
                $scope.date = new Date();
                $scope.names.unshift($scope.enteredName);
                $scope.enteredName = "";
            };

            $scope.removeName = function(name){
                    var i = $scope.names.indexOf(name);
                    $scope.names.splice(i, 1);
                    // array.splice(start, deleteCount[, item1[, item2[, ...]]])
                    // How do I push onto the ul
                    $scope.removed.push(name);
            };
        });
    </script>

这是来自 Youtube 上 Introduction to Angular JS in 50 Examples Part 1

上 50 个示例第 1 部分中对 Angular JS 的介绍视频

我正在尝试从该视频中分叉出一个简单的待办事项列表。我想将已删除或已检查完成的值附加或推送到相应的无序列表中。

这是HTML：

    <body ng-controller="NameCtrl">
    <div class="container-fluid">
         <div class="row">
            <div class="col-xs-12 jumbotron">
                <form ng-submit="addName()">
                    <input type="text" ng-model="enteredName" class="form-control">
                    <input type="submit" class="form-control btn-primary" value="Add">
                </form>
                <ul style="padding: 0;">
                    <li class="list-group-item btn text-primary" data-toggle="tooltip" ng-repeat="name in names" title="Created {{ date | date: 'short' }}">
                        {{ name }}

                        <button class="btn btn-xs btn-success pull-left" ng-click="removeName()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>

                        <button class="btn btn-xs btn-danger pull-right" ng-click="removeName()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>

                    </li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 jumbotron btn-success">
                <h3>Completed</h3>
                <ul class="removed" ng-model="removed">
                    <li class="list-group-item"></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 jumbotron btn-danger">
                <h3>Deleted</h3>
                <ul class="removed" ng-model="removed">
                    <li class="list-group-item"></li>
                </ul>
            </div>
        </div>

    </div>
</body>

我正在处理 removeName() 函数。我稍后会添加一个 completedName() 函数。

来自 jQuery，在那里你可以现场编写 HTML 元素，AngularJS 对我这个菜鸟来说有点新境界。在搜索如何执行此操作时，我找到了有关 AngularJS 指令的页面，这对于这个目的来说有点过分了。

** 中的 ng-model="removed" 是一个测试。似乎您可以通过这种方式 link 数据，这会创建一个“$scope.removed”，然后我认为我可以使用该数据。在我们找到有效答案之前可能会产生误导。

感谢建议。谢谢！

已修复！

感谢您的快速回复。根据提到的JSFiddle，我做了以下修改：

<script>
        <!-- must make variable app name THE SAME AS the ng-app name! -->
        var nameApp = angular.module('nameApp', []);
        nameApp.controller('NameCtrl', function($scope){
            $scope.names = ['do the laundry','buy bananas','do the dishes','mow the lawn'];
            $scope.removedNames = []; // added this
            $scope.completedNames = []; // added this
            $scope.date = new Date();

            $scope.addName = function() {
                // also need to get new date and time stamp it on item
                $scope.names.unshift($scope.enteredName);
                $scope.enteredName = "";
            };

            $scope.removeName = function(name){
                var i = $scope.names.indexOf(name);
                $scope.names.splice(i, 1);

                $scope.removedNames.unshift(name + " DELETED AT " + $scope.date);
            };

            $scope.completeName = function(name){
                var j = $scope.names.indexOf(name);
                $scope.names.splice(j, 1);
                $scope.completedNames.unshift(name + " COMPLETED AT " + new Date());
            };
        });
    </script>

最后：

<body ng-controller="NameCtrl">
    <div class="container-fluid">
         <div class="row">
            <div class="col-xs-12 jumbotron">
                <form ng-submit="addName()">
                    <input type="text" ng-model="enteredName" class="form-control" placeholder="Enter task">
                    <input type="submit" class="form-control btn-primary" value="Add">
                </form>
                <ul style="padding: 0;">
                    <li class="list-group-item btn text-primary" data-toggle="tooltip" ng-repeat="name in names" title="Created {{ date | date: 'short' }}">
                        {{ name }}

                        <button class="btn btn-xs btn-success pull-left" ng-click="completeName(name)"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button> <!-- added completeName(name) function -->

                        <button class="btn btn-xs btn-danger pull-right" ng-click="removeName(name)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <!-- altered removeName(name) function  -- even though it still works without the name param... -->

                    </li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 jumbotron btn-success">
                <h3>Completed</h3>
                <ul class="completed">
                    <li class="list-group-item text-success text-center" ng-repeat="name in completedNames"> {{ name }} </li> <!-- altered this -->
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 jumbotron btn-danger">
                <h3>Deleted</h3>
                <ul class="removed">
                    <li class="list-group-item text-danger text-center" ng-repeat="name in removedNames"> {{ name }} </li> <!-- altered this -->
                </ul>
            </div>
        </div>

    </div>
</body>

Answer 1

您的删除函数需要名称作为参数，但您没有在 html 中使用它。在您的 ng-click 中包含参数：

<li ng-repeat="name in names">
    {{ name }}
    <button ng-click="removeName(name)">Remove</button>
</li>

Fiddle

Another example，我相信你正在努力实现什么，或者至少将你推向正确的方向

Answer 2

您的代码有几个问题。

您还没有初始化删除的数组
您没有调用 removeName(name)

参见 jsfiddle 示例 here。

基本上是两件事

    $scope.removed = []

<button class="btn btn-xs btn-success pull-left" ng-click="removeName(name)">Remove Name</button>

将 Angular 数组数据推送/附加到 HTML 元素中？

Push / append Angular array data into an HTML element?

arrays

push

append

angularjs