0
부트 스트랩 모달을 설치 프로그램의 경고 상자로 사용하려고합니다. JSFiddle에서 코드를 실행하고 노트를 삭제하려고하면 "정의되지 않은 'splice'속성을 읽을 수 없습니다."오류가 발생합니다. Visual Studio에서 동일한 코드를 실행하면 오류가 표시되지 않지만 잘못된 메모는 삭제됩니다. 생성 된 첫 번째 노트를 삭제합니다. 주십시오 take a look at the fiddle that I created하십시오.AngularJS, Modal, "정의되지 않은 'splice'속성을 읽을 수 없습니다.
'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>
감사합니다. 이것은 알렉스의 의견을 종합 한 것입니다. –
Working Fiddle : jsfiddle.net/VJ94U/1024/ –