javascript - indexOf 在 AngularJS 中删除了错误的项目

Question

我正在构建一个笔记应用程序(类似于博客，实际上具有不同的术语，如 post=note 等)来练习我在 AngularJS 和 Rails 方面的技能。

左侧有一个侧边栏( Controller Sidebar.js)，它从 Rails API 获取所有项目并将它们 ng-repeats 到列表中。

通过单击其中之一，show.html 将在右侧的 ng-show 内呈现。显示 View 有一个链接，可让您删除该项目，然后从左侧的侧边栏将其拼接。经过大量的血、汗和泪水，我相信我成功了，除了一个细节:删除(=> destroy())项目后，错误的索引从侧边栏中删除。我尝试让它与indexOf一起工作，然后我console.logged索引 - 它总是显示为-1。

为了共享相同的注释对象数组，我创建了一个服务，该服务使用 getter 和 setter 来实现此目的。

如何从侧边栏中删除正确的项目？

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().notes内容

$$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 未引用 ShareNoteScope.getScope().notes 中的 object 有关。因此，为了获得正确的引用，我们在本例中使用了 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'); 
}