আমি এনজি-ক্লিক ব্যবহার করে কোন অ্যারে থেকে কোনও আইটেম বা অবজেক্ট কীভাবে মুছব?

Question

আমি এমন একটি ফাংশন লেখার চেষ্টা করছি যা বোতামটি ক্লিক করা হলে আমাকে একটি আইটেম সরিয়ে ফেলতে সক্ষম করে তবে আমি মনে করি যে আমি ফাংশনটিতে বিভ্রান্ত হয়ে যাচ্ছি - আমি কি ব্যবহার করব $digest?

এইচটিএমএল এবং অ্যাপ্লিকেশন

<ul ng-repeat="bday in bdays">
  <li>
    <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
    <form ng-show="editing" ng-submit="editing = false">
      <label>Name:</label>
      <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
      <label>Date:</label>
      <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
      <br/>
      <button class="btn" type="submit">Save</button>
      <a class="btn" ng-click="remove()">Delete</a>
    </form>
  </li>
</ul>

$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

Comments

আপনি $ ডাইজেস্ট চান না, যেহেতু এটি অ্যাংুলারের ডাইজেস্ট লুপে প্রবেশ করার জন্য ব্যবহৃত হয় (এবং এনজি-ক্লিকের কারণে আপনি ইতিমধ্যে ডাইজেস্ট লুপে রয়েছেন)। আপনি কি একটি অ্যারে থেকে কোনও আইটেম সরানোর চেষ্টা করছেন?

— রাজকোক

@ মারকরাজাকোক :) হ্যাঁ আমি যা করার চেষ্টা করছি তা হ'ল

— জেস ম্যাককেঞ্জি

remove()মধ্যে ng-clickআপনি এটা কোন প্রেক্ষাপটে হয়েছে আছে। কী অপসারণ করা হচ্ছে এবং যদি এটির মধ্যে রয়েছে ng-repeat, বা আইটেমটি সরানো হচ্ছে কোথা থেকে এসেছে বা আপনি কী আচরণ থেকে চান তা চিহ্নিত করার জন্য মার্কআপে আরও বিশদ প্রয়োজনremove()

— Charlietfl

@ চারলিটফ্লায় এটি এনজি-রিপিটের মধ্যেই আমি প্রশ্নটি আপডেট করেছি

— জেস ম্যাককেঞ্জি

হেরস আমার 1 টি নিবন্ধ যা এনজি-রিপিট কোডেপিডিয়া.এনফো

— সতিন্দর সিংহ

Answer 1

আইটেমটি সরাতে আপনাকে এটিকে অ্যারে থেকে অপসারণ করতে হবে এবং bdayআইটেমটি মার্কআপে আপনার অপসারণ ফাংশনটিতে যেতে পারে। তারপরে নিয়ামক আইটেমের সূচি সন্ধান করুন এবং অ্যারে থেকে সরান

<a class="btn" ng-click="remove(item)">Delete</a>

তারপরে নিয়ামক:

$scope.remove = function(item) { 
  var index = $scope.bdays.indexOf(item);
  $scope.bdays.splice(index, 1);     
}

কৌনিকটি স্বয়ংক্রিয়ভাবে bdaysঅ্যারেতে পরিবর্তনটি সনাক্ত করবে এবং এর আপডেটটি করবেng-repeat

ডেমো: http://plnkr.co/edit/ZdShIA?p= পূর্বরূপ

সম্পাদনা: সার্ভারের সাথে সরাসরি আপডেট করা যদি $resourceঅ্যারে আপডেটগুলি পরিচালনা করার জন্য আপনার তৈরি করা পরিষেবা ব্যবহার করে তবে এটি সার্ভার আপডেট করে

Comments

$indexযদি আপনার তালিকাটি টেম্পলেটে ফিল্টার করা হয় তবে সরাসরি ব্যবহার করা ত্রুটি উত্পন্ন করতে পারে। এটি একটি টেম্পলেট জিনিস; এটি ng-click='remove(bday)'তখন ব্যবহার করা আরও নিরাপদarr.splice(arr.indexOf(bday),1);

— উমুর কনটেক

আপনাকে $ সূচক পাস করার দরকার নেই কারণ আপনি পদ্ধতির অভ্যন্তরে 'এটি' ব্যবহার করতে পারেন। $ সুযোগ.রেভ = ফাংশন () {। স্কোপ.বিডেস.স্প্লাইস (এটি। $ সূচক, 1); }

— ম্যাচডাভ

@matthewdavidson this is undefined। প্লাঙ্কার / জিসফিল সম্ভবত?

— তেজরিরিমুরি

.indexOf(item)-1 পাওয়া না গেলে ফিরে আসবে, এর ফলে অ্যারের শেষে আইটেমটি সন্ধান না করা হলে এটি সরিয়ে ফেলতে পারে।

— বেন উইল্ড

@ShibinRagh এর জন্য দস্তাবেজ পড়তে Array.prototype.splice ()

— charlietfl

Answer 2

এটি একটি সঠিক উত্তর:

<a class="btn" ng-click="remove($index)">Delete</a>
$scope.remove=function($index){ 
  $scope.bdays.splice($index,1);     
}

@ Charlietfl এর উত্তরে আমি মনে করি এটি ভুল যেহেতু আপনি $indexপরামিতি হিসাবে পাস করেছেন তবে আপনি ইচ্ছাটি নিয়ামকের পরিবর্তে ব্যবহার করেন। আমি ভুল হলে শুধরে :)

Comments

উভয় উত্তর সমান বলে মনে হচ্ছে, যদিও আপনার ফাংশনটি without ছাড়াই সূচি গ্রহণ করতে পারে এবং এটি এখনও কাজ করবে।

— svarog

এটি সঠিক উত্তর হওয়া উচিত। indexOfকেবলমাত্র কাজ করে এটা IE9 + +

— লেভি

আপনার এনজি-রিপিটে অর্ডার বাই বা ফিল্টার থাকলে এটি কাজ করবে না

— জোয়ান-ডিয়েগো রদ্রিগেজ

এটি আরও ভাল কাজ করবে, যদি আপনি $ সূচক দ্বারা ট্র্যাক ব্যবহার করেন

— অঙ্কিত বালিয়ান

@ জোয়ান-ডিয়েগো রডরিগেজ আপনার ফিল্টার / অর্ডার থাকলে আপনি এটি কীভাবে কাজ করবেন তা মনে করবেন না কেবল এক্সএমিলির উত্তর পড়ুন

— জেমসস্টোন

Answer 3

যদি আপনি কোনও এনজি-রিপিটের ভিতরে থাকেন

আপনি ওয়ান লাইনারের বিকল্পটি ব্যবহার করতে পারেন

    <div ng-repeat="key in keywords"> 
        <button ng-click="keywords.splice($index, 1)">

            {{key.name}}
        </button>
    </div>

$index কৌণিক দ্বারা অভ্যন্তরের অ্যারের বর্তমান সূচকটি দেখানোর জন্য ব্যবহৃত হয় ng-repeat

Comments

আমি এই একটি লাইনার পছন্দ করেছি এবং ব্যবহার করেছি

— ইটারিকিকি

Answer 4

ব্যবহার $indexবেসিক ক্ষেত্রে পুরোপুরি ভাল কাজ করে , এবং @ Charlietfl এর উত্তর দুর্দান্ত। তবে মাঝে মাঝে $indexযথেষ্ট হয় না।

আপনার একটি একক অ্যারে কল্পনা করুন যা আপনি দুটি ভিন্ন এনজি-রিপিটসে উপস্থাপন করছেন। সেই এনজি-রিপিটগুলির মধ্যে একটি হ'ল সত্যবাদী সম্পত্তি থাকা বস্তুর জন্য ফিল্টার করা হয় এবং অন্যটি মিথ্যা সম্পত্তির জন্য ফিল্টার করা হয়। দুটি পৃথক ফিল্টার করা অ্যারে উপস্থাপন করা হচ্ছে, যা একক আসল অ্যারে থেকে প্রাপ্ত। (অথবা, যদি এটি কল্পনা করতে সহায়তা করে: সম্ভবত আপনার একক লোক রয়েছে, এবং আপনি সেই অ্যারেতে থাকা মহিলাদের জন্য একটি এনজি-পুনরাবৃত্তি চান এবং অন্যটি একই অ্যারের পুরুষদের জন্য )) আপনার লক্ষ্য: নির্ভরযোগ্যভাবে মুছে ফেলা থেকে ফিল্টার করা অ্যারের সদস্যদের কাছ থেকে তথ্য ব্যবহার করে মূল অ্যারে।

এই ফিল্টার করা অ্যারেগুলির প্রত্যেকটিতে, $ সূচকটি মূল অ্যারের মধ্যে থাকা আইটেমের সূচক হবে না। ফিল্টারকৃত সাব-অ্যারেতে এটি সূচক হবে । সুতরাং, আপনি মূল peopleঅ্যারেটিতে ব্যক্তির সূচকটি বলতে সক্ষম হবেন না , আপনি কেবলমাত্র sub সূচকটি womenবা menউপ-অ্যারে থেকে জানেন । এটি ব্যবহার করে মোছার চেষ্টা করুন এবং আপনি যেখানে চেয়েছিলেন সেখানে বাদে আপনার কাছে আইটেমগুলি অদৃশ্য হয়ে যাবে। কি করো?

আপনি যদি ভাগ্যবান হন তবে কোনও ডেটা মডেল ব্যবহার করে প্রতিটি বস্তুর জন্য একটি অনন্য শনাক্তকারী অন্তর্ভুক্ত থাকে, তবে অবজেক্টটি এবং spliceএটি মূল অ্যারের বাইরে খুঁজে বের করতে $ সূচীর পরিবর্তে এটি ব্যবহার করুন । (নীচে আমার উদাহরণটি ব্যবহার করুন তবে সেই অনন্য শনাক্তকারীর সাথে।) তবে আপনি যদি এত ভাগ্যবান না হন?

কৌণিক প্রকৃতপক্ষে প্রতিটি আইটেমকে এনজি-পুনরাবৃত্ত অ্যারে (মূল, মূল অ্যারেতে) বলা হয় এমন একটি অনন্য সম্পত্তি দিয়ে বাড়িয়ে তোলে $$hashKey। আপনি $$hashKeyযে আইটেমটি মুছতে চান তাতে ম্যাচের জন্য মূল অ্যারেটি অনুসন্ধান করতে পারেন এবং সেভাবে এ থেকে মুক্তি পান।

নোট যেটি $$hashKeyবাস্তবায়নের বিশদ, এনজি-রিপিটের জন্য প্রকাশিত এপিআইতে অন্তর্ভুক্ত নয়। তারা যে কোনও সময় এই সম্পত্তিটির জন্য সমর্থন সরাতে পারে। তবে সম্ভবত না। :-)

$scope.deleteFilteredItem = function(hashKey, sourceArray){
  angular.forEach(sourceArray, function(obj, index){
    // sourceArray is a reference to the original array passed to ng-repeat, 
    // rather than the filtered version. 
    // 1. compare the target object's hashKey to the current member of the iterable:
    if (obj.$$hashKey === hashKey) {
      // remove the matching item from the array
      sourceArray.splice(index, 1);
      // and exit the loop right away
      return;
    };
  });
}

সাথে আহ্বান:

ng-click="deleteFilteredItem(item.$$hashKey, refToSourceArray)"

---

সম্পাদনা: $$hashKeyএটির মতো একটি ফাংশন ব্যবহার করে, যা কোনও মডেল-নির্দিষ্ট সম্পত্তি নামের পরিবর্তে কীগুলি ব্যবহার করে , এটি বিভিন্ন মডেল এবং প্রসংগে জুড়ে এই ফাংশনটিকে পুনরায় ব্যবহারযোগ্য করে তোলার উল্লেখযোগ্য যুক্ত সুবিধা রয়েছে advantage এটি আপনার অ্যারে রেফারেন্স এবং আপনার আইটেম রেফারেন্স সহ সরবরাহ করুন এবং এটি ঠিক কাজ করা উচিত।

Answer 5

আমি সাধারণত এ জাতীয় স্টাইলে লিখি:

<a class="btn" ng-click="remove($index)">Delete</a>


$scope.remove = function(index){
  $scope.[yourArray].splice(index, 1)
};

আশা করি এটি আপনাকে স্কোপ এবং [আপনার অ্যারে] এর মধ্যে একটি বিন্দু (।) ব্যবহার করতে সহায়তা করবে

Comments

(সূচী, 1) এ "1" এর অর্থ কী

— শিবিনরাগ

@ShibinRagh এটা এর deleteCount। একটি পূর্ণসংখ্যা মুছে ফেলার জন্য পুরানো অ্যারে উপাদানগুলির সংখ্যা নির্দেশ করে। যদি ডিলিটকাউন্ট 0 হয় তবে কোনও উপাদান সরানো হবে না। এই ক্ষেত্রে, আপনার কমপক্ষে একটি নতুন উপাদান নির্দিষ্ট করা উচিত। যদি ডিলিটকাউন্ট শুরুতে অ্যারেতে থাকা উপাদানগুলির সংখ্যার চেয়ে বেশি হয়, তবে অ্যারের শেষের মধ্য দিয়ে সমস্ত উপাদান মুছে ফেলা হবে। অ্যারে.প্রোটোটাইপ.স্প্লাইস () ডকুমেন্টেশন

— 3 ʙᴀᴋᴇʀ

Answer 6

গৃহীত উত্তরে নির্মাণের, এই সঙ্গে কাজ করবে ngRepeat, filterএবং হাতল expections ভাল:

নিয়ন্ত্রক:

vm.remove = function(item, array) {
  var index = array.indexOf(item);
  if(index>=0)
    array.splice(index, 1);
}

দেখুন:

ng-click="vm.remove(item,$scope.bdays)"

Comments

আপনি আপনার নিয়ামকটিতে remove স্কোপ.ভিএম থেকে "সরান" বরাদ্দ করেননি, সুতরাং এই কোডটি কাজ করবে না। এখন আপনি যদি এটি করেন ... $ সুযোগ.vm = {সরান: ফাংশন () {...}}, তবে এটি হবে।

— জাস্টিন রুসো

Answer 7

একটি নিয়ামক ছাড়া বাস্তবায়ন implementation

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
  var app = angular.module("myShoppingList", []); 
</script>

<div ng-app="myShoppingList"  ng-init="products = ['Milk','Bread','Cheese']">
  <ul>
    <li ng-repeat="x in products track by $index">{{x}}
      <span ng-click="products.splice($index,1)">×</span>
    </li>
  </ul>
  <input ng-model="addItem">
  <button ng-click="products.push(addItem)">Add</button>
</div>

<p>Click the little x to remove an item from the shopping list.</p>

</body>
</html>

স্প্লাইস () পদ্ধতিটি অ্যারে থেকে / আইটেমগুলিকে যুক্ত করে / সরিয়ে দেয়।

array.splice(index, howmanyitem(s), item_1, ....., item_n)

সূচক : প্রয়োজনীয়। একটি পূর্ণসংখ্যা যা আইটেমগুলি যুক্ত / সরিয়ে ফেলতে হবে তা নির্দিষ্ট করে, অ্যারের শেষ থেকে অবস্থান নির্দিষ্ট করতে নেতিবাচক মানগুলি ব্যবহার করুন।

হাওম্যানাইটাইট (গুলি) : .চ্ছিক । সরানো আইটেমের সংখ্যা। যদি 0 তে সেট করা থাকে তবে কোনও আইটেম সরানো হবে না।

আইটেম_, ..., আইটেম_ এন : ptionচ্ছিক । অ্যারেতে যুক্ত হওয়া নতুন আইটেম (গুলি)

Comments

এটি সঠিক উত্তর। সাধারণ জাভাস্ক্রিপ্ট কল করতে কোনও নিয়ামকের উপর নির্ভর কেন?

— এলে ফাই

Answer 8

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

সুতরাং, উদাহরণস্বরূপ, আপনার এইচটিএমএল ...

<a class="btn" ng-remove-birthday="$index">Delete</a>

তারপরে, একটি নির্দেশিকা তৈরি করুন ...

angular.module('myApp').directive('ngRemoveBirthday', ['myService', function(myService){
    return function(scope, element, attrs){
        angular.element(element.bind('click', function(){
            myService.removeBirthday(scope.$eval(attrs.ngRemoveBirthday), scope);  
        };       
    };
}])

তারপরে আপনার পরিষেবাতে ...

angular.module('myApp').factory('myService', [function(){
    return {
        removeBirthday: function(birthdayIndex, scope){
            scope.bdays.splice(birthdayIndex);
            scope.$apply();
        }
    };
}]);

আপনি যখন নিজের কোডটি ঠিক এভাবে লিখবেন, আপনি আপনার কোডটি পুনর্গঠন না করে ভবিষ্যতের পরিবর্তনগুলি লিখতে খুব সহজ করে তুলবেন। এটি সঠিকভাবে সংগঠিত হয়েছে এবং আপনি কাস্টম নির্দেশাবলী ব্যবহার করে বাঁধাই করে কাস্টম ক্লিক ইভেন্টগুলি সঠিকভাবে পরিচালনা করছেন।

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

এছাড়াও, যদি আপনার অন্য কোনও 'মুছুন' বোতামের প্রয়োজন হয় তবে আপনার এখন একটি নির্দেশিক বৈশিষ্ট্য রয়েছে ('এনজি-রিমুভ-জন্মদিন') আপনি সহজেই পৃষ্ঠার যে কোনও উপাদানকে নির্ধারণ করতে পারেন। এটি এখন এটি মডুলার এবং পুনরায় ব্যবহারযোগ্য করে তোলে। এঙ্গুলার ২.০ এর ভারী ওয়েব উপাদানগুলির দৃষ্টান্তের সাথে কাজ করার সময় এটি কার্যকর হবে। ২.০ তে কোনও নিয়ামক নেই। :)

শুভ বিকাশ !!!

Answer 9

এখানে আরও একটি উত্তর। আমি আশা করি এটি সাহায্য করবে

<a class="btn" ng-click="delete(item)">Delete</a>

$scope.delete(item){
 var index = this.list.indexOf(item);
                this.list.splice(index, 1);   
}

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

পুরো উত্সটি এখানে https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / গ্লোবাল_অবজেক্টস / অ্যারে /
স্প্লাইস

Answer 10

আপনার আইটেমে বা আইটেমের কোনও নির্দিষ্ট ক্ষেত্র থাকলে, আপনি ফিল্টার () ব্যবহার করতে পারেন। এটি যেখানে () এর মতো কাজ করে।

<a class="btn" ng-click="remove(item)">Delete</a>

নিয়ামক মধ্যে:

$scope.remove = function(item) { 
  $scope.bdays = $scope.bdays.filter(function (element) {
                    return element.ID!=item.ID
                });
}

Answer 11

Pass the id that you want to remove from the array to the given function 

কন্ট্রোলার থেকে (কাজটি একই নিয়ামকের মধ্যে থাকতে পারে তবে এটি কোনও পরিষেবাতে রাখতে পছন্দ করে)

    function removeInfo(id) {
    let item = bdays.filter(function(item) {
      return bdays.id=== id;
    })[0];
    let index = bdays.indexOf(item);
    data.device.splice(indexOfTabDetails, 1);
  }