Angularjs में,

Question

से पंक्ति को हटाने के बाद तालिका डेटा को अपडेट करने के लिए मैं Asp.net वेब API को कॉल करने के लिए angularjs का उपयोग कर रहा हूं। टेबल से एक पंक्ति को हटाने के बाद?

मुझे w3schools में भी समाधान नहीं मिला।

मेरे एचटीएमएल कोड

<tr ng-repeat="user in users | filter: search"> 
    <td>{{ user.Id }}</td> 
    <td>{{ user.FullName }}</td> 
    <td>{{ user.Mobile }}</td> 
    <td>{{ user.Birthdate }}</td> 
    <td>{{ user.Gender }}</td> 
    <td>{{ user.AcademicLevel }}</td> 

    <td> 

मेरे AngularJS कोड

$scope.DeleteUser = function (id) { 
    UserID = $scope.users[id].Id; 
    $http.delete('/api/users/' + UserID).success(function (data) { 
     (function (data) { 
     $scope.error = "error " + data; 
    }); 

} 

मैं Stackoverflow में खोज की है, मैं इन जहाँ वे मेरे लिए काम नहीं किया के कुछ पाया, वे मुझे उलझन में।

$scope.refresh() 
$scope.apply(); 

Answer 1

सबसे पहले, आपके नियंत्रक में सर्वर अनुरोधों को संभालना एक बुरा विचार है। अंगूठे के नियम के रूप में, सर्वर पर कॉल का प्रतिनिधि करने के लिए सेवाओं का उपयोग करें, और अपने मॉडलों को अपने दृश्य में "ग्लूइंग" के लिए नियंत्रक का उपयोग करें।

अपने कोड में कुछ मुद्दों कर रहे हैं, यह कुछ इस तरह दिखना चाहिए:

$scope.DeleteUser = function (id) { 
    var userId = $scope.users[id].Id; 
    $http.delete('/api/users/' + userId) 
      .success(function (data) { 
      $scope.error = "error " + data; 
      }); 
} 

यहां तक ​​कि अगर सर्वर से कॉल सफल रहा था, तो आप अपने सामने के अंत मॉडल को कभी नहीं। क्या आप $ scope.refresh() के बारे में अन्य विषयों पर पढ़ा है, मुझे लगता है कि फिर से डेटा प्राप्त करने में करने के उद्देश्य से है, तो जैसे:

$scope.refresh = function(){ 
    $http.get('/api/users') 
      .success(function(data){ 
       $scope.users = data; 
      }); 
} 

तो क्रम में जिनमें आप दृश्य ताज़ा करते हैं, आप अपने मॉडल को अपडेट करना होगा ।

$scope.DeleteUser = function (id) { 
    var userId = $scope.users[id].Id; 
    $http.delete('/api/users/' + userId) 
      .success(function (data) { 
      //either this 
      $scope.refresh(); 
      //or this 
      $scope.users.splice(id,1); 
      }); 
} 

Answer 2

बस सरणी से उपयोगकर्ता को निकालें:

// Find index of the user 
var index = $scope.users.indexOf(id); 
// Remove user from array 
$scope.users.splice(index, 1); 

इसके अलावा, तुम क्यों उपयोगकर्ता की आईडी, फ़ेच कर रहे हैं जब आप पहले से ही यह ?:

$scope.DeleteUser = function (id) { 
    $http.delete('/api/users/' + id).success(function (data) { 
     var index = $scope.users.indexOf(id); 
     $scope.users.splice(index, 1); 
    }); 
} 

Answer 3

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

$scope.DeleteUser = function (index) { 
    var UserID = $scope.users[index].Id; 
    $http.delete('/api/users/' + UserID).then(function(del) { 
     $scope.users.splice(index,1); 
    }); 
} 

आप अपने एनजी-दोहराने में $ इंडेक्स का उपयोग कर उपयोगकर्ता की अनुक्रमणिका प्राप्त कर सकते हैं, लेकिन चूंकि आपका कोड असीमित हो सकता है, इसकी अनुशंसा नहीं की जाती है।

या, जब आप अपना विलोपन हल हो जाते हैं तो आप बस अपने एपीआई से दूसरे को प्राप्त कर सकते हैं।

$scope.DeleteUser = function (index) { 
    var UserID = $scope.users[index].Id; 
    $http.delete('/api/users/' + UserID).then(function(del) { 
     $http.get('/api/users').then(function(data){ 
      $scope.users = data; 
     }); 
    }); 
} 

लेकिन ... यदि आपका एप्लिकेशन उपयोग करने वाला व्यक्ति आपके एपीआई की तुलना में उपयोगकर्ताओं को तेज़ी से हटा रहा है तो क्या होगा?

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

जावास्क्रिप्ट में के रूप में कार्य वास्तव में निष्पादन योग्य ऑब्जेक्ट्स वे प्रॉपर्टी हो सकती हैं। तो हम हटाने के लिए isBusy संपत्ति को हटाएंगे, यह जानने के लिए कि यह पहले से संसाधित हो रहा है।

$scope.DeleteUser = function (index) { 
    if(!$scope.DeleteUser.isBusy){ 
     var UserID = $scope.users[id].Id; 
     $scope.DeleteUser.isBusy = true; 

     $http.delete('/api/users/' + UserID).then(function(del) { 
      $scope.users.splice(id,1); 
      $scope.DeleteUser.isBusy = false; 
     }); 
    } 
} 

संपादित करें:

अद्यतन .success() रूप $http वादा वस्तु पर .then() उपयोग करने के लिए कोड अब मान्य नहीं है।