AngularJS，Modal，“无法读取属性'拼接'未定义”

问题描述：

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

'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="[email protected]*" 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>

答

你需要从最初的HTML通过指数：

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

而且在$ scope.alert功能，而不是采取指数作为参数传递给“OK”功能，以指数作为参数，以提醒功能和使用它在'好'功能。

$scope.alert = function (index) { 

}

谢谢！这与Alex的评论相结合。 –

工作小提琴：jsfiddle.net/VJ94U/1024/ –

答

它的简单，你不必 “项目” 阵列:)其所谓的 “items1” 所以你只需要改变$ scope.ok这个

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

嗨亚历克斯，我做到了，现在它在删除工程。但它删除了错误的音符。无论选择哪一个，它都会删除最前面的音符。 –

随着Yeswanth的评论，我与你一起工作。谢谢Alex！ –

不用客气。 –

答

你index ARGS方法未定义。你需要在参数中传递项目的索引。

AngularJS，Modal，“无法读取属性'拼接'未定义”

相关推荐