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>

источник

2014-12-26 Casper Nybroe

Вам необходимо пройти индекс от исходного HTML:

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

И в функции $ scope.alert, вместо того, чтобы индекс в качестве параметра «OK» функции, взять индекс в качестве параметра для предупреждения функции и использования это в функции «ok».

$scope.alert = function (index) { 

}

источник

2014-12-26 10:31:25 yeswanth

Спасибо! Это работало с комбинацией из комментария Алекс. –

Рабочая скрипка: jsfiddle.net/VJ94U/1024/ –

Его простой, у вас нет "пунктов" массив :) его называют "статей1", так что вам нужно просто изменить этот

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

источник

2014-12-26 10:20:12

Привет, Алекс, я сделал это, и теперь он работает над удалением. Но он удаляет неправильную ноту. Он удаляет верхнюю ноту независимо от того, какой из них я выбираю. –

С комментарием от Yeswanth я работал с вашим как. Спасибо, Алекс! –

добро пожаловать. –

You index арг в $ scope.ok метод не определен. Вам нужно передать индекс элемента в params.

источник

2014-12-26 10:22:34

AngularJS, Modal, «Невозможно прочитать свойство« сращивание »неопределенного»

ответ

Смежные вопросы