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>

这是来自Yuleube上的50个示例第1部分视频中的Angular JS简介Introduction to Angular JS in 50 Examples Part 1

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

这是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 =＆＃34;删除＆＃34;在这是一个测试。您似乎可以通过这种方式链接数据，这会创建一个＆＃34; $ scope.removed＆＃34;，然后我认为我可以使用这些数据。在找到合适的答案之前可能会产生误导。

建议表示赞赏。谢谢！

固定！

感谢您的快速回复。据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元素中？

2 个答案: