मैं एनजी-क्लिक का उपयोग करके किसी आइटम या ऑब्जेक्ट को सरणी से कैसे हटा सकता हूं?

Question

मैं एक फ़ंक्शन लिखने की कोशिश कर रहा हूं जो मुझे बटन क्लिक होने पर एक आइटम निकालने में सक्षम बनाता है लेकिन मुझे लगता है कि मैं फ़ंक्शन से भ्रमित हो रहा हूं - क्या मैं उपयोग करता हूं $digest?

HTML और app.js:

<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

आप $ डाइजेस्ट नहीं चाहते हैं, क्योंकि इसका उपयोग कोणीय के डाइजेस्ट लूप में प्रवेश करने के लिए किया जाता है (और आप एनजी-क्लिक के कारण पहले से ही डाइजेस्ट लूप में हैं)। क्या आप किसी आइटम को सरणी से निकालने का प्रयास कर रहे हैं?

— मार्क राजकोक

@MarkRajcok :) हाँ क्या IM करने की कोशिश कर रहा है

— जेस मैकेंजी

remove()में ng-clickजिस तरह से आप यह कोई संदर्भ है की है। मार्कअप में अधिक विस्तार की आवश्यकता है यह दिखाने के लिए कि क्या हटाया जा रहा है और यदि यह भीतर है ng-repeat, या जहां से हटाया जा रहा है, या आप किस व्यवहार से चाहते हैंremove()

— charlietfl

@charlietfl यह एनजी-रिपीट के भीतर है मैंने इस सवाल को अपडेट किया है

— जेस मैकेंजी

Heres my 1 लेख जो बताता है कि एनजी-दोहराने codepedia.info/angularjs-delete-table-row-tr-on-click

— singh

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=preview

EDIT: यदि सर्वर के साथ लाइव अपडेट करते हैं, तो आप जिस सेवा का उपयोग करते हैं $resource, वह उसी समय सरणी अपडेट को प्रबंधित करने के लिए सर्वर का उपयोग करके बनाएगी

Comments

$indexयदि आपकी सूची टेम्प्लेट पर फ़िल्टर की गई है तो सीधे बग का उपयोग करके कीड़े उत्पन्न कर सकते हैं। यह एक टेम्पलेट बात है; यह ng-click='remove(bday)'तब उपयोग करने के लिए सुरक्षित हैarr.splice(arr.indexOf(bday),1);

— उमर कोंटाकी

आपको $ इंडेक्स पास करने की आवश्यकता नहीं है क्योंकि आप विधि के अंदर 'इस' का उपयोग कर सकते हैं। $ स्कोप.मूवी = फंक्शन () {$ स्कोप.बेडे.प्लिसिस (यह। $ इंडेक्स, 1); }

— मैचडाव

@matthewdavidson this is undefined। प्लंकर / jsfiddle शायद?

— तजोर्रीमोर्री

.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

ऐसा लगता है कि दोनों उत्तर समान हैं, हालांकि आपका फ़ंक्शन $ के बिना सूचकांक को स्वीकार कर सकता है और यह अभी भी काम करेगा।

— सरोगेट

यह सही उत्तर होना चाहिए। indexOfकेवल काम करता है अगर यह IE9 +

— लेवी

यह अगर आप एक orderBy या अपने एनजी-दोहराने में एक फिल्टर है काम नहीं करेगा

— जोआन-डिएगो रोड्रिगेज

यह बेहतर काम करेगा, अगर आपने $ सूचकांक द्वारा ट्रैक का उपयोग किया है

— अंकित बल्यान

@ जोआन-DiegoRodriguez कैसे आप ही आप फ़िल्टर / orderby कोई बात नहीं बस XMLilley के पढ़ा है काम करने के लिए इसे पाने के हैं उत्तर

— jamesmstone

Answer 3

मामले में आप एनजी-रिपीट के अंदर हैं

आप एक लाइनर विकल्प का उपयोग कर सकते हैं

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

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

$index कोण के अंदर के वर्तमान सूचकांक को दिखाने के लिए कोणीय द्वारा उपयोग किया जाता है ng-repeat

Comments

मुझे यह पसंद है और इस एक लाइनर

— etoricky

Answer 4

का उपयोग करते हुए $indexबुनियादी मामलों में काम करता है पूरी तरह से अच्छी तरह से, और @ charlietfl का जवाब बहुत अच्छा है। लेकिन कभी-कभी, $indexपर्याप्त नहीं है।

कल्पना कीजिए कि आपके पास एक एकल सरणी है, जिसे आप दो अलग-अलग एनजी-रिपीट में प्रस्तुत कर रहे हैं। उन एनजी-रिपीट में से एक को उन वस्तुओं के लिए फ़िल्टर किया जाता है जिनके पास एक सत्य संपत्ति है, और दूसरे को झूठी संपत्ति के लिए फ़िल्टर किया गया है। दो अलग-अलग फ़िल्टर किए गए सरणियाँ प्रस्तुत की जा रही हैं, जो एक मूल सरणी से प्राप्त होती हैं। (या, अगर यह कल्पना करने में मदद करता है: शायद आपके पास लोगों का एक ही सरणी है, और आप उस सरणी में महिलाओं के लिए एक एनजी-दोहराना चाहते हैं, और उसी सरणी में पुरुषों के लिए एक और ।) आपका लक्ष्य: मज़बूती से हटाएं। फ़िल्टर किए गए सरणियों के सदस्यों की जानकारी का उपयोग करते हुए मूल सरणी।

उन फ़िल्टर किए गए सरणियों में से प्रत्येक में, $ सूचकांक मूल सरणी के भीतर आइटम का सूचकांक नहीं होगा। यह फ़िल्टर किए गए उप-सरणी में सूचकांक होगा । इसलिए, आप उस व्यक्ति के इंडेक्स को मूल peopleसरणी में नहीं बता पाएंगे , आप केवल $ इंडेक्स को उप 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मॉडल-विशिष्ट संपत्ति के नाम के बजाय चाबियाँ , इस फ़ंक्शन को विभिन्न मॉडलों और संदर्भों में पुन: प्रयोज्य बनाने का महत्वपूर्ण अतिरिक्त लाभ भी है। इसे अपने सरणी संदर्भ, और आपके आइटम संदर्भ के साथ प्रदान करें, और यह सिर्फ काम करना चाहिए।

Answer 5

मैं आमतौर पर इस तरह की शैली में लिखता हूं:

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


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

आशा है कि यह आपको $ गुंजाइश और [yourArray] के बीच एक डॉट (।) का उपयोग करने में मदद करेगा

Comments

(इंडेक्स, 1) में "1" का क्या अर्थ है

— शिबिनरघ

@ शिबिनाग यह है deleteCount। हटाने के लिए पुराने सरणी तत्वों की संख्या को इंगित करने वाला पूर्णांक। यदि DeleteCount 0 है, तो कोई भी तत्व नहीं निकाले जाते हैं। इस मामले में, आपको कम से कम एक नया तत्व निर्दिष्ट करना चाहिए। यदि DeleteCount शुरू में शुरू होने वाले सरणी में छोड़े गए तत्वों की संख्या से अधिक है, तो सरणी के अंत के माध्यम से सभी तत्व हटा दिए जाएंगे। Array.prototype.splice () प्रलेखन

— । '13

Answer 6

स्वीकार किए जाते हैं जवाब पर बिल्डिंग, इस के साथ काम करेंगे ngRepeat, filterऔर संभाल अपेक्षाओं बेहतर:

नियंत्रक:

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

आपने अपने कंट्रोलर में $ गुंजाइश.vm को "रिमूव" नहीं किया, इसलिए यह कोड काम नहीं करेगा। अब अगर आपने ऐसा किया है ... $ गुंजाइश.vm = {remove: function () {...}}, तो यह होगा।

— जस्टिन रुसो

Answer 7

नियंत्रक के बिना कार्यान्वयन।

<!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)

सूचकांक : आवश्यक है। एक पूर्णांक जो वस्तुओं को जोड़ने / हटाने के लिए किस स्थिति में निर्दिष्ट करता है, सरणी के अंत से स्थिति को निर्दिष्ट करने के लिए नकारात्मक मानों का उपयोग करें।

howmanyitem (s) : वैकल्पिक। निकाले जाने वाली वस्तुओं की संख्या। यदि 0 पर सेट किया गया है, तो कोई आइटम नहीं निकाला जाएगा।

item_1, ..., item_n : वैकल्पिक। नए आइटम को सरणी में जोड़ा जाना है

Comments

यह सही जवाब है। सरल जावास्क्रिप्ट कॉल करने के लिए एक नियंत्रक पर भरोसा क्यों करें?

— एले फी

Answer 8

मैं असहमत हूं कि आपको अपने नियंत्रक पर एक विधि कहनी चाहिए। आपको किसी भी वास्तविक कार्यक्षमता के लिए एक सेवा का उपयोग करना चाहिए, और आपको स्केलैबिलिटी और मॉड्यूलरिटी के लिए किसी भी कार्यक्षमता के लिए निर्देशों को परिभाषित करना चाहिए, साथ ही एक क्लिक ईवेंट भी असाइन करना चाहिए जिसमें उस सेवा का कॉल शामिल है जिसे आप अपने निर्देश में इंजेक्ट करते हैं।

उदाहरण के लिए, अपने HTML पर ...

<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();
        }
    };
}]);

जब आप अपना कोड इस तरह ठीक से लिखते हैं, तो आपको अपने कोड को पुनर्गठन किए बिना भविष्य में बदलाव लिखना बहुत आसान हो जाएगा। यह ठीक से व्यवस्थित है, और आप कस्टम निर्देशों का उपयोग करके कस्टम क्लिक घटनाओं को सही ढंग से संभाल रहे हैं।

उदाहरण के लिए, यदि आपका क्लाइंट कहता है, "हे, अब चलो इसे सर्वर को कॉल करते हैं और रोटी बनाते हैं, और फिर एक मोडल पॉपअप करते हैं।" आप आसानी से किसी भी HTML, और / या नियंत्रक विधि कोड को जोड़ने या बदलने के बिना केवल सेवा में आसानी से जा पाएंगे। यदि आपके पास नियंत्रक पर सिर्फ एक पंक्ति थी, तो आपको अंततः एक सेवा का उपयोग करने की आवश्यकता होगी, जो कार्यक्षमता को बढ़ाने के लिए क्लाइंट को भारी उठाने के लिए कह रहा है।

इसके अलावा, यदि आपको कहीं और एक और 'डिलीट' बटन की आवश्यकता है, तो अब आपके पास एक निर्देश विशेषता ('एनजी-रिमूव-बर्थडे') है, आप आसानी से पृष्ठ पर किसी भी तत्व को असाइन कर सकते हैं। यह अब इसे मॉड्यूलर और पुन: प्रयोज्य बनाता है। यह काम आ जाएगा जब HEAVY वेब घटकों के साथ कोणीय 2.0 के प्रतिमान से निपटने। 2.0 में कोई नियंत्रक नहीं है। :)

हैप्पी डेवलपिंग !!!

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/JavaScript/Reference/Global_Objects/Array/splice

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