অ্যাঙ্গুলারজেএস স্কোপের কোনও অ্যারে থেকে কীভাবে কোনও আইটেম সরিয়ে নেওয়া যায়?


153

সাধারণ করণীয় তালিকা, তবে প্রতিটি আইটেমের তালিকার পৃষ্ঠায় একটি মুছুন বোতাম সহ:

এখানে চিত্র বর্ণনা লিখুন

প্রাসঙ্গিক টেম্পলেট এইচটিএমএল:

<tr ng-repeat="person in persons">
  <td>{{person.name}} - # {{person.id}}</td>
  <td>{{person.description}}</td>
  <td nowrap=nowrap>
    <a href="#!/edit"><i class="icon-edit"></i></a>
    <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
  </td>
</tr>

প্রাসঙ্গিক নিয়ামক পদ্ধতি:

$scope.delete = function (person) {
  API.DeletePerson({ id: person.id }, function (success) {
    // I need some code here to pull the person from my scope.
  });
};

আমি চেষ্টা করেছি $scope.persons.pull(person)এবং $scope.persons.remove(person)

যদিও ডাটাবেসটি সফলভাবে মুছে ফেলা হয়েছে, আমি এই আইটেমটি সুযোগ থেকে টানতে পারি না এবং ক্লায়েন্টের কাছে থাকা ডেটার জন্য আমি সার্ভারে একটি পদ্ধতি কল করতে চাই না, আমি কেবল এই এক ব্যক্তিকে সুযোগ থেকে সরিয়ে দিতে চাই।

কোন ধারনা?


আমি এই সাদা-রুটটি চালাই, এবং দৃশ্যটি ভাল কাজ করবে না। আমি মুছে ফেলার পরে আমি সর্বদা একটি খালি পৃষ্ঠা পেয়েছিলাম :-(
zx1986

অনুরূপ নিবন্ধটি লিখেছেন কোডেপিডিয়া.নোফো
সতিন্দর সিংহ

এটি স্কোপ থেকে মুছে ফেলা সম্পর্কে নয় বরং একটি অ্যারে থেকে, এবং এটি কৌনিক, এটির জাভাস্ক্রিপ্ট নির্বিশেষে একই হবে
Xsmael

উত্তর:


259

আপনার সমস্যাটি সত্যই কৌনিক সংক্রান্ত নয়, অ্যারে পদ্ধতিগুলির সাথে। অ্যারে থেকে একটি বিশেষভাবে আইটেম সরানোর সঠিক উপায়টি রয়েছেArray.splice । এছাড়াও, এনজি-রিপিট ব্যবহার করার সময়, আপনি বিশেষ $indexসম্পত্তিটিতে অ্যাক্সেস পাবেন যা আপনি যে অ্যারে পাশ করেছেন তার বর্তমান সূচক।

সমাধানটি আসলে বেশ সোজা:

দেখুন:

<a ng-click="delete($index)">Delete</a>

নিয়ন্ত্রক:

$scope.delete = function ( idx ) {
  var person_to_delete = $scope.persons[idx];

  API.DeletePerson({ id: person_to_delete.id }, function (success) {
    $scope.persons.splice(idx, 1);
  });
};

1
@ স্কটমালাচোস্কি আপনি ঠিক বলেছেন আমি সেই অংশটি ভুলে গেছি। প্রতিফলিত করতে আমি আমার উত্তরটি সংশোধন করেছি, সুতরাং এটি আপনার সাথে সামঞ্জস্য থাকবে।
জোশ ডেভিড মিলার

13
যত্নবান - আপনি যদি একটি ভিউতে একই বস্তুর একাধিক এনজি-পুনরাবৃত্তি ব্যবহার করেন (উদাহরণস্বরূপ তফসিলযুক্ত কাজ, আনস্কুলেডড টাস্কস, সম্পূর্ণ টাস্কগুলি সমস্ত $ স্কোপ.টাস্কস থেকে বেরিয়ে এসেছে) তবে আপনার সাথে একাধিক আইটেম থাকবে কারণ এই সূচক-ভিত্তিক সমাধানটি কাজ করবে না সূচক 2, 3, 4, ইত্যাদি
শ্যাপার

উপরের মন্তব্য, @ শ্যাকার দ্বারা, একই অ্যারের বিভিন্ন ফিল্টার সেট সহ একাধিক এনজি-পুনরাবৃত্তি সম্পর্কে ঠিক আছে।
সূচিপত্রের

4
@ অ্যান্ড্রু কুকলেউইচ - indexOfআরও ব্যয়বহুল অপারেশন হতে পারে; ফিল্টারিং ছাড়াই, এটি সম্পূর্ণ অপ্রয়োজনীয়। ফিল্টারিং সহ, indexOfউপযুক্ত পদ্ধতি হবে।
জোশ ডেভিড মিলার

আমি এটির সাথে লড়াই করছি এবং উপরের ট্যাগ প্রজন্মের সাথে একটি সামান্য পরিবর্তন করতে হয়েছিল - - {} with দিয়ে মুছে ফেলুন ({{$ সূচক} delete) অন্যথায় আমি স্ট্রিং $ সূচক পেয়েছি - তবে আমার কিছু ভুল আছে কারণ এটি যে পদ্ধতি কল না। এটি মুছে ফেলার মতো সূচির কোনও উল্লেখ মুছে ফেললে () তবে এটি সত্যিই সহায়তা করে না।
মাইকিমিল 21

310

আপনাকে personআপনার personsঅ্যারেতে সূচকটি খুঁজে পেতে হবে , তারপরে অ্যারের spliceপদ্ধতিটি ব্যবহার করুন :

$scope.persons.splice( $scope.persons.indexOf(person), 1 );

49
এটি একটি ভাল উত্তর; তালিকাটি ফিল্টার করা হলে কাজ করে যাতে ভিউতে থাকা সূচকটি স্কোপে থাকা অ্যারের মতো না হয়।
অ্যান্ড্রু কুকলেউইচজ

5
এটি প্রকৃতপক্ষে আরও ভাল উত্তর। নোট করুন যে ফিল্টারড তালিকাগুলি অ্যান্ড্রু দ্বারা উল্লিখিত কেস ব্যবহারের পাশাপাশি, এই পদ্ধতির মধ্যে আপনি একাধিক ব্যক্তিকে মুছতে পারেন এবং এই মোছার জন্য অ্যাজাক্স অনুরোধগুলি বিন্যাস থেকে সরে গেছে। যদি আপনি আজাক্স কল ফেরতের আগে সারি সূচকগুলি ব্যবহার করেন তবে আপনি ভুল সারিগুলি সরিয়ে ফেলবেন।
জোরিস

4
কিছু ক্ষেত্রে ভাল, তবে সূচকের সাথে আপনাকে সঠিক আইনের জন্য সমস্ত আইটেমের পুনরাবৃত্তি করতে হবে, জোশের উত্তরে আপনি সূচক এবং আইটেমটি দ্রুত পাবেন
ড্যাভার

@ মাইক - এই পলিফিলটি ব্যবহার করুন ।
জোসেফ সিলবার

8

আমি অ্যান্ডস্কোর.জেএস লাইব্রেরি ব্যবহার করব যাতে দরকারী কার্যকারিতার তালিকা রয়েছে।

without

without_.without(array, *values)

মুছে ফেলা মানগুলির সমস্ত দৃষ্টান্ত সহ অ্যারের অনুলিপি দেয় Return

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
// => [2, 3, 4]

উদাহরণ

var res = "deleteMe";

$scope.nodes = [
  {
    name: "Node-1-1"
  },
  {
    name: "Node-1-2"
  },
  {
    name: "deleteMe"
  }
];
    
$scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, {
  name: res
}));

জেএসফিডেলে ডেমো দেখুন ।


filter

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

// => [2, 4, 6]

উদাহরণ

$scope.newNodes = _.filter($scope.nodes, function(node) {
  return !(node.name == res);
});

ফ্রেডে ডেমো দেখুন ।


আমি সম্ভবত ব্যবহার করতে চাই $scope.nodes = _.without($scope.nodes, node);, কারণ তিনি রেফারেন্স হয়েছেnode
জেক

আধুনিক ব্রাউজারগুলিতে আপনি ব্যবহার করতে পারেন Array.prototype.filter_.filter(array, fun)হয়ে array.filter(fun)
bfontaine

7
$scope.removeItem = function() {
    $scope.items.splice($scope.toRemove, 1);
    $scope.toRemove = null;
};

এটি আমার জন্য কাজ করে!


4

আপনার যদি তালিকার সাথে সম্পর্কিত কোনও ফাংশন থাকে, যখন আপনি স্প্লাইস ফাংশনটি করেন, সমিতিটিও মুছে ফেলা হয়। আমার সমাধান:

$scope.remove = function() {
    var oldList = $scope.items;
    $scope.items = [];

    angular.forEach(oldList, function(x) {
        if (! x.done) $scope.items.push( { [ DATA OF EACH ITEM USING oldList(x) ] });
    });
};

তালিকার প্যারামের নাম আইটেম রয়েছে । PARAM x.done ইঙ্গিত যদি আইটেমটি মুছে ফেলা হবে।

আরেকটি তথ্যসূত্র: আরেকটি উদাহরণ

আশা করি আপনাকে সাহায্য করবে। গ্রিটিংস।


2

@ জোসেফের স্বীকৃত উত্তরের জন্য সিলবার কাজ করছে না, কারণ সূচিপত্র -১ প্রদান করে। এটি সম্ভবত কারণ অ্যাংুলার একটি হ্যাশকি যুক্ত করেছে, যা আমার $ স্কোপ.ইটিএমস [0] এবং আমার আইটেমের জন্য আলাদা। আমি এঙ্গুলার.টোজসন () ফাংশন দিয়ে এটি সমাধান করার চেষ্টা করেছি, তবে এটি কার্যকর হয়নি :(

আহ, আমি কারণটি খুঁজে পেয়েছি ... আমি আমার টেবিলের দুটি কলাম তৈরির জন্য আমার a স্কোপ.ইটিএমএস দেখে একটি খণ্ড পদ্ধতি ব্যবহার করি। দুঃখিত!


2

আপনি এটি ব্যবহার করতে পারেন

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });

1

কৌণিক একটি বিল্ট ইন ফাংশন বলা হয় arrayRemove, আপনার ক্ষেত্রে পদ্ধতিটি সহজভাবে হতে পারে:

arrayRemove($scope.persons, person)


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.