indexOf удаляет неправильный элемент в AngularJS

Question

Я создаю приложение для заметок (что-то вроде блога на самом деле с разными терминами, такими как post = note и т. Д.), Чтобы практиковать мои навыки в AngularJS и Rails.

Существует боковая панель слева (контроллер Sidebar.js), которая извлекает все элементы из Rails API и ng-повторяет их в список.

Нажав на один из них, show.html отображает внутри ng-show справа. В представлении show есть ссылка, которая позволяет удалить элемент, а затем соединить его с боковой панелью слева. После много крови, пота и слез, я считаю, что сделал это, кроме одной детали: После удаления (=> destroy()) элемента, неправильный индекс удаляется с боковой панели. Я попытался заставить его работать с indexOf, а затем console.logged index - он всегда выглядит равным -1.

Чтобы поделиться тем же массивом объектов заметок, я создал службу, которая выполняет это с помощью геттера и сеттера.

Как удалить нужный элемент с боковой панели?

show.html

<div class="row"> 
    <div class="col-lg-10"> 
    <h3>{{ note.title }}</h3> 
    </div> 
    <div class="col-lg-2"> 
    <button type="button" ng-click="destroy(note)" class="btn btn-default btn-xs pull-right"> 
     <span class="glyphicon glyphicon-remove"></span></button> 
    </div> 
</div> 

<hr/> 

<div class="note-description"> 
    {{ note.description }} 
    <br> 
</div> 

Sidebar.js

var app = angular.module('notepadApp'); 

app.controller('SidebarController', 
    ['$scope', '$http', '$routeParams', '$location', 'Note', 'ShareNoteScope', 
    function($scope, $http, $routeParams, $location, Note, ShareNoteScope) { 

    $scope.notes = Note.query(function(){ 
     ShareNoteScope.setScope($scope.notes); 
    }); 


    $scope.getClass = function (path) { 
     if ($location.path().substr(0, path.length) === path) { 
     return 'active'; 
     } else { 
     return ''; 
     } 
    } 
    }] 
); 

sidebar.html

<ul class="nav nav-stacked" ng-controller="SidebarController"> 
    <li ng-repeat="note in notes.notes | orderBy: '-created_at'" class="note-li"> 
    <a href="/notes/{{note.id}}" ng-class="getClass('/notes/{{note.id}}')" 
     class="" > 
    {{ note.title }} 
    </a> 
    <div ng-repeat="tag in note.tags"> 
     <div class="label">{{ tag }}</div> 
    </div> 
    </li> 
</ul> 

NoteCtrl.js

'use strict'; 

var app = angular.module('notepadApp'); 

app.controller('NoteController', 
    ['$scope', '$http', '$routeParams', '$location', 
    function($scope, $http, $routeParams, $location) { 

    }] 
); 

app.controller('NoteShowController', 
    ['$scope', '$http', '$routeParams', '$location', 'Note', 'ShareNoteScope', 
    function($scope, $http, $routeParams, $location, Note, ShareNoteScope) { 

     if ($routeParams.id) { 
     Note.get({id: $routeParams.id}, function(note){ 
      $scope.note = note.note; 
     }); 
     } 
     else { 
     $scope.note = ShareNoteScope.getScope().notes[0].id; 
     } 

     //Destroy method for deleting a note 
     $scope.destroy = function(note) { 
     Note.remove({id: note.id}, function() { 
      var index = ShareNoteScope.getScope().notes.indexOf(note); 
      console.log(index); 
      ShareNoteScope.getScope().notes.splice(index, 1); 
     }); 
     $location.path('/notes'); 
     } 
    }] 
); 

app.controller('NoteCreateController', 
    ['$scope', 'Note', '$routeParams', '$location','ShareNoteScope', 
    function($scope, Note, $routeParams, $location, ShareNoteScope) { 

    $scope.notes = ShareNoteScope.getScope().notes; 

    $scope.newNote = {}; 
    $scope.createNote = function() { 
     Note.create($scope.note, function (newNote) { 
     $scope.notes.unshift(newNote.note); 
     $scope.newNote = ''; 
     $scope.errors = ''; 
     $location.path('/notes/'+newNote.note.id); 
     }); 
    } 


}]); 

models.js

'use strict'; 

var app = angular.module('notepadApp'); 

app.factory('Note', ['$resource', function($resource) { 
    return $resource('/api/notes/:id', { id: "@id" }, { 
    get: { 
     method: 'GET' 
    }, 
    query: { 
     method: 'GET', 
     isArray: false 
    }, 
    create: { 
     method: 'POST' 
    } 
    }); 
}]); 

app.factory('ShareNoteScope', function (Note) { 
    var $scope; 
    return { 
    setScope: function (scope) { 
     $scope = scope; 
    }, 
    getScope: function() { 
     return $scope; 
    } 
    } 
}); 

ShareNoteScope.getScope(). Отмечает содержание

$$hashKey 

    "object:5" 
created_at 

    "2015-11-29T09:07:18.614Z" 
description 

    null 
id 

    130 
tags 

    [] 
title 

    "5345" 
updated_at 

    "2015-11-29T09:07:18.614Z" 
user_id 

    1 

Answer 1

Мы пошли на дно этого в чате. И проблема, вероятно, имела отношение к note, не ссылаясь на object в ShareNoteScope.getScope().notes. Таким образом, чтобы получить правильную ссылку, мы использовали filter в этом случае:

JavaScript

$scope.destroy = function(note) { 
    Note.remove({id: note.id}, function() { 
     var res = ShareNoteScope.getScope().notes.filter(function(el){ 
      return el.id == note.id; 
     }); 
     note = res[0]; 
     var index = ShareNoteScope.getScope().notes.indexOf(note); 
     console.log(index); 
     ShareNoteScope.getScope().notes.splice(index, 1); 
    }); 
    $location.path('/notes'); 
} 

Answer 2

Pass $ индекс в уничтожить метод вместе с примечанием объект

<div class="row"> 
    <div class="col-lg-10"> 
     <h3>{{ note.title }}</h3> 
    </div> 
    <div class="col-lg-2"> 
     <button type="button" ng-click="destroy(note,$index)" class="btn btn-default btn-xs pull-right"> 
      <span class="glyphicon glyphicon-remove"></span></button> 
    </div> 
</div> 
<hr/> 
<div class="note-description"> 
    {{ note.description }} 
    <br> 
</div> 


    $scope.destroy = function(note, $index) { 
    Note.remove({id: note.id}, function() { 
     ShareNoteScope.getScope().notes.splice($index, 1); 
    }); 
    $location.path('/notes'); 
    } 

Попробуйте