Question

我正在尝试使Bootstrap模式作为我的设置的警报框。当我在JSFiddle中运行代码并尝试删除一个注释时，它给出了错误“无法读取未定义的属性'拼接'”。当我在Visual Studios中运行相同的代码时，并没有给我错误，但它删除了错误的注释。它删除创建的第一个音符。请take a look at the fiddle that I created。

'use strict'

var app = angular.module('plunker', ['ui.sortable','ui.bootstrap']);

app.controller('MainCtrl', function ($scope, $modal) {

    var i;
    $scope.itemsList = {
        items1: [],
        items2: []
    };

    for (i = 0; i <= 5; i += 1) {
        $scope.itemsList.items1.push({ 'Id': i, 'Label': 'Item ' + i });
    }
    $scope.sortableOptions = {
        containment: '#sortable-container',
        accept: function (sourceItemHandleScope, destSortableScope) {
            return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
        }
    };

    $scope.addNote = function() {
    $scope.itemsList.items1.push({"Id" :  $scope.itemsList.items1.length, "Label": "Item " +     $scope.itemsList.items1.length})
    }

    $scope.alert = function () {
        $modal.open({
            templateUrl: 'openAlertBox.html',
            scope: $scope,
            controller: function ($scope) {
                $scope.ok = function (index) {
                    $scope.itemsList.items.splice(index, 1)
                    $scope.$dismiss();
                }
                $scope.cancel = function () {
                    $scope.$dismiss()
                }
            }
        })
    }

});

<html ng-app="plunker">
<head>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="https://rawgithub.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
</head>
<body ng-controller="MainCtrl">
    <div id="sortable-container">
        <div class="form-actions">
            <div class="input-append">
                <form>

                    <button class="btn btn-success" type="button" ng-click="addNote()">
                        Add Note
                    </button>
                </form>
            </div>
        </div>
        <div class="sortable-row" as-sortable="sortableOptions" ng-model="itemsList.items1">
            <div ng-repeat="item in itemsList.items1" class="simpel-fighter-input" as-sortable-item>
                <input class="category-form textboxid" type="text" name="input" ng-model="item.Label" placeholder="Deltager1">
                <div as-sortable-item-handle class="touch-mover">MOVE ME</div>
                <a ng-click="alert()" href><div class="touch-mover">DELETE</div></a>
                <input class="category-form textboxid" style="float:right" type="text" name="input" ng-model="item.Label2" placeholder="Deltager2">
            </div>
        </div>

    </div>
</body>
</html>
<script type="text/ng-template" id="openAlertBox.html">
    <div class="modal-header">
        <h3 class="modal-title">You are about to delete</h3>
    </div>
    <div class="modal-body">
        <p>du you really want to delete?</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">Yes</button>
        <button class="btn btn-warning" ng-click="cancel()">No</button>
    </div>
</script>

Answer 1

$ scope.ok方法中的index args是未定义的。你需要在params中传递项目的索引。

Answer 2

简单，你没有＆＃34;项目＆＃34;数组:)它被称为＆＃34; items1＆＃34;所以你只需要改变这个

$scope.itemsList.items1.splice(index, 1)

Answer 3

您需要从最初的html传递索引：

<a ng-click="alert($index)" href><div class="touch-mover">DELETE</div></a>

在$ scope.alert函数中，不要将索引作为'ok'函数的参数，而是将index作为参数来提醒函数并在'ok'函数中使用它。

$scope.alert = function (index) {

}

AngularJS，Modal，＆＃34;无法读取属性＆＃39; splice＆＃39;未定义＆＃34;

3 个答案: