AngularJS दायरे में किसी आइटम को सरणी से कैसे निकालें?

Question

सरल-टू-लिस्ट, लेकिन प्रत्येक आइटम के लिए सूची पृष्ठ पर एक हटाएं बटन के साथ:

प्रासंगिक टेम्पलेट HTML:

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

यद्यपि डेटाबेस सफलतापूर्वक हटा दिया गया है, मैं इस आइटम को दायरे से नहीं खींच सकता और मैं क्लाइंट के पास पहले से मौजूद डेटा के लिए सर्वर पर एक विधि कॉल नहीं करना चाहता, मैं बस इस एक व्यक्ति को दायरे से निकालना चाहता हूं।

कोई विचार?

Comments

मैं इस सफेद $ मार्ग को चलाता हूं, और दृश्य ठीक काम नहीं करेगा। हमेशा डिलीट करने के बाद मुझे एक खाली पेज मिला :-(

— zx1986

इसी तरह का लेख लिखा है codepedia.info/angularjs-delete-table-row-tr-on-click

— singh

यह गुंजाइश से हटाने के बारे में इतना नहीं है, बल्कि एक सरणी से है, और यह कोणीय की परवाह किए बिना एक ही होगा, इसकी सिर्फ जावास्क्रिप्ट

— Xsmael

Answer 1

आपका मुद्दा वास्तव में कोणीय के साथ नहीं है, लेकिन एरे तरीकों के साथ है। किसी सरणी से किसी विशेष आइटम को निकालने का उचित तरीका है 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);
  });
};

Comments

@ScottMalachowski तुम सही हो। मैं वह हिस्सा भूल गया। मैंने अपने उत्तर को संशोधित करने के लिए कहा कि यह आपके अनुरूप होगा।

— जोश डेविड मिलर

सावधान - यदि आप एक दृश्य में एक ही ऑब्जेक्ट के कई एनजी-दोहराव का उपयोग करते हैं तो यह इंडेक्स-आधारित समाधान काम नहीं करेगा (जैसे अनुसूचित कार्य, अनसिक्योल्ड कार्य, पूर्ण किए गए कार्य सभी $ गुंजाइश से बाहर आ रहे हैं।) क्योंकि आपके पास कई आइटम होंगे सूचकांक २, ३, ४, आदि

— २

उपरोक्त टिप्पणी, @shacker द्वारा, एक ही सरणी के विभिन्न फ़िल्टर्ड सेट के साथ कई एनजी-रिपीट के बारे में, सही है। इंडेक्सऑफ के साथ नीचे विधि का उपयोग करें

— एंड्रयू कुक्लेविकेज़

@AndrewKuklewicz - indexOfएक अधिक महंगा ऑपरेशन हो सकता है; फ़िल्टरिंग के बिना, यह पूरी तरह से अनावश्यक है। लेकिन छानने के साथ, indexOfउपयुक्त विधि होगी।

— जोश डेविड मिलर

मैं इससे जूझ रहा हूं और ऊपर की टैग पीढ़ी में मामूली बदलाव करना पड़ा - {{}} के साथ डिलीट ({$ इंडेक्स}}) अन्यथा मुझे स्ट्रिंग इंडेक्स मिल गया - लेकिन मुझे कुछ गलत लगा है क्योंकि उस विधि को कभी नहीं कहता। यह तब होता है जब मैं सूचकांक के किसी भी उल्लेख को हटाता हूं (जैसे) लेकिन वह वास्तव में मदद नहीं करता है।

— मिकमिल

Answer 2

आपको personअपने personsएरे में इंडेक्स का पता लगाना होगा , फिर एरे के spliceतरीके का उपयोग करें:

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

Comments

यह एक बेहतर जवाब है; काम करता है जब सूची को फ़िल्टर किया गया है ताकि दृश्य में सूचकांक समान रूप से सरणी में नहीं हो।

— एंड्रयू कुक्लेविकेज़

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

— जोरिस जू

कुछ मामलों में बेहतर है, लेकिन इंडेक्सऑफ के साथ आपको सही खोजने के लिए सभी वस्तुओं पर पुनरावृति करनी होगी, जोश में जवाब मिलता है कि आप सूचकांक और आइटम को तेजी से प्राप्त करते हैं

— डेव

@ माइक - इस पॉलीफ़िल का उपयोग करें ।

— जोसफ सिलबर

Answer 3

मैं Underscore.js लाइब्रेरी का उपयोग करूंगा जिसमें उपयोगी कार्यों की सूची है।

without

without_.without(array, *values)

हटाए गए मानों के सभी उदाहरणों के साथ सरणी की एक प्रति लौटाता है।

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

JSFiddle में डेमो देखें ।

---

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

फिडल में डेमो देखें ।

Comments

मैं शायद का उपयोग करें $scope.nodes = _.without($scope.nodes, node);, क्योंकि वह के संदर्भ में हैnode

— जेक

आधुनिक ब्राउज़रों पर आप उपयोग कर सकते हैं Array.prototype.filter। _.filter(array, fun)बन जाता है array.filter(fun)।

— bfontaine

Answer 4

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

यह मेरे लिए काम करता है!

Answer 5

यदि आपके पास सूची से संबंधित कोई फ़ंक्शन है, जब आप ब्याह फ़ंक्शन बनाते हैं, तो एसोसिएशन को भी हटा दिया जाता है। मेरा समाधान:

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

सूची के नाम को आइटम कहा जाता है । परम x.done इंगित करता है कि क्या आइटम हटा दिया जाएगा।

एक और संदर्भ: एक और उदाहरण

आशा है कि आपकी मदद करेंगे। अभिवादन।

Answer 6

@ जोसेफ सिलबर के स्वीकृत उत्तर के लिए काम नहीं कर रहा है, क्योंकि इंडेक्सऑफ रिटर्न -1। यह शायद इसलिए है क्योंकि कोणीय एक हैश को जोड़ता है, जो मेरे $ स्कोप के लिए अलग है। मेरे [और] आइटम। मैंने इसे कोणीय.जॉनसन () फ़ंक्शन के साथ हल करने की कोशिश की, लेकिन यह काम नहीं किया :(

आह, मुझे इसका कारण पता चला ... मैं अपनी $ स्कोप.इटीम्स देखकर अपनी तालिका में दो कॉलम बनाने के लिए एक चंक विधि का उपयोग करता हूं। माफ़ करना!

Answer 7

आप भी इसका इस्तेमाल कर सकते हैं

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

Answer 8

कोणीय में एक अंतर्निहित फ़ंक्शन होता है arrayRemove, जिसे आपके मामले में विधि बस कह सकती है:

arrayRemove($scope.persons, person)

Answer 9

array.splice(array.pop(item));

Answer 10

किसी तत्व को स्कोप उपयोग से हटाने के लिए:

// remove an item
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    };

यहां एंटर लिंक डिस्क्रिप्शन से