Question

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

左侧有一个侧边栏（控制器Sidebar.js），它从Rails API获取所有项目并将其重复到列表中。

通过单击其中一个，show.html在右侧的ng-show内部呈现。显示视图有一个链接，可以让您删除该项目，然后从左侧的侧边栏拼接它。经过大量的血，汗和泪，我相信我做到了，除了一个细节：删除（=＆gt; destroy（））项后，错误的索引从侧边栏中删除。我试图使用indexOf，然后我控制台。记录索引 - 它总是看起来是-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 contents

$$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

在destroy方法中传递$ index和note对象

<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');
  }

试试这个

indexOf删除AngularJS中的错误项

2 个答案: