यूआई

Question

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

इस समय सबकुछ ठीक काम करता है, हालांकि मुझे मामूली समस्या है। तालिका का हिस्सा, हम एक एक्शन बटन आउटपुट कर रहे हैं, जिस पर क्लिक किया गया एक वेब सेवा को आमंत्रित करता है जो वर्तमान रिकॉर्ड को अपडेट करता है। मैं रिकॉर्ड डेटा स्वचालित रूप से अपडेट करने की कोशिश कर रहा हूं, लेकिन परिवर्तनों को देखने के लिए मुझे पृष्ठ को रीफ्रेश करना होगा।

यहाँ मेरी कोड

मेरे app.js

angular.module('my_vehicles', ['vehicleServices', 'AccountsDirectives']); 

service.js

'use strict'; 

angular.module('vehicleServices', ['ngResource']). 
    factory('Car', function($resource) { 
     return $resource('/vehicle/api/car.json/:id', {}, 
      { 
       query: {method:'GET',  isArray:false}, 
       delete: {method:'DELETE', isArray:false}, 
       update: {method:'PUT',  isArray:false} 
      } 
     ); 
}); 

controller.js

'use strict'; 

function MyVehicleController($scope, Car) { 

    var init = function() { 
     $scope.page_has_next = true; 
     $scope.cars = []; 
     $scope.page = 1; 
    }; 

    // initialize values 
    init(); 


    Car.query({my_vehicle: true}, 
     // success 
     function(data) { 
      $scope.page_has_next = data.has_next; 
      $scope.cars = data.objects; 
     }, 
     // error 
     function(data) { 

     } 
    ); 


    $scope.mark_sold = function(id, index) { 
     Car.update({ 
      id  : id, 
      status : 'S' 
     }, 
     function(data) { 

     }); 
    } 

    $scope.delete = function(id, index) { 
     Car.delete(
      {id: id}, 
      // on success 
      function() { 
       // remove the element from cars array and it will be 
       // automatically updated by ng-repeat 
       $scope.cars.splice(index, 1); 
       $scope.loadMore(1); 
      } 
     ); 
    } 

    $scope.is_total_zero = function() { 
     return !!($scope.cars.length) 
     //return $scope.cars.length > 0 ? true : false 
    } 


    $scope.loadMore = function(limit) { 
     if($scope.page_has_next) { 
      $scope.$broadcast('loading_started'); 
      console.log(limit); 
      Car.query({my_vehicle: true, page: $scope.page, limit: limit}, 
       // success 
       function(data) { 
        $scope.page_has_next = data.has_next; 
        $scope.cars = $scope.cars.concat(angular.fromJson(data.objects)); 
        $scope.page++; 
        $scope.$broadcast('loading_ended'); 
       }, 
       // error 
       function() { 
        $scope.page_has_next = false; 
        $scope.$broadcast('loading_ended'); 
       } 
      ); 
     } 
    } 


    $scope.$on('loading_started', function() { 
     $scope.state = 'loading'; 
    }); 

    $scope.$on('loading_ended', function() { 
     $scope.state = 'ready'; 
    }); 


} 

और अंत में, मेरी html कोड है

    <tr ng-repeat="car in cars"> 
         <td><a href="{% ng car.get_absolute_url %}">{% ng car._get_model_display.make_display %} {% ng car._get_model_display.model_display %} {% ng car._get_model_display.trim_display %}</a></td> 
         <td>{% ng car.created_at_format %}</td> 
         <td>{% ng car.view_count %}</td> 
         <td ng-model="car.status_label">{% ng car.status_label %}</td> 
         <td> 
          <div class="btn-group"> 
           <button ng-disabled="car.status == 'S' || car.status == 'P'" ng-model="edit" class="btn btn-mini edit-btn">{% trans 'Edit' %}</button> 
           <button ng-disabled="car.status == 'S'" ng-click="delete(car.id, $index)" class="btn btn-mini delete-btn">{% trans 'Delete' %}</button> 
           <button ng-disabled="car.status == 'S' || car.status == 'P'" ng-click="mark_sold(car.id, $index)" class="btn btn-mini edit-btn">{% trans 'Mark as sold' %}</button> 
          </div> 
          </td> 
         </tr> 

पुनश्च {% एनजी XXX%} outputting है {{XXX}}, ऊपर सिंटैक्स का उपयोग क्योंकि Django templating इंजन मुझे इस्तेमाल करने की अनुमति नहीं है हूँ {{}} तो मैं एक templatetag विकसित किया है कि होगा आउटपुट {{}} ..

जैसा कि पहले उल्लेख किया गया है, मेरी समस्या यह है कि हर बार जब मैं "बेचा गया चिह्न" का आह्वान करता हूं तो यह कारों को लागू करेगा .update() लेकिन यह प्रदर्शित रिकॉर्ड को अपडेट नहीं करेगा, इसे देखने के लिए ताज़ा करना होगा परिवर्तन। कोई विचार है कि मैं इसे कैसे हल कर सकता हूं?

Answer 1

जहां तक ​​मैं आपके कोड को समझता हूं, आप केवल कार मॉडल ($ scope.cars) अपडेट किए बिना डीबी अपडेट करते हैं, इसलिए परिवर्तन केवल डीबी में दिखाई देते हैं लेकिन AngularJS एप्लिकेशन में नहीं होते हैं।

हो सकता है कि निम्न प्रयास करें:

$scope.mark_sold = function(id, index) { 
    Car.update({ 
     id  : id, 
     status : 'S' 
    }, 
    function(data) { 
     $scope.cars[id].status = 'S'; 
    }); 
} 

Answer 2

आप अपने इन-स्मृति कारों सरणी अपडेट करना होगा। आप पहले से ही सरणी सूचकांक (mark_sold समारोह के दूसरे पैरामीटर) है:

$scope.mark_sold = function(id, index) { 
    Car.update({ 
     id  : id, 
     status : 'S' 
    }, 
    function(data) { 
     // Update in-memory array 
     $scope.$apply(function(scope) { 
      scope.cars[index].status = 'S'; 
     }); 

    }); 
}