एक रंग पिकर

Question

मैं अपने आवेदन में एक मानक HTML रंग पिकर का उपयोग के साथ मॉडल अपडेट की संख्या कम अक्सर अद्यतन किया गया। चूंकि मेरे पास vm.currentUser.color पर घड़ी है, इसलिए इसी विधि को भी अक्सर बुलाया जाता है, और यह समस्याग्रस्त है।

क्या मॉडल पिकर के ठीक बटन पर क्लिक होने पर मॉडल चर सेट करने का कोई तरीका है?

Answer 1

के रूप में यह चलाता है के बाद ही रंग पॉपअप बंद कर दिया है और यदि कोई परिवर्तन होता है (कोई फर्क नहीं पड़ता कि कितनी बार आप पॉपअप के अंदर रंग बदलने) आपको लगता है कि मैदान पर ng-change उपयोग कर सकते हैं: http://plnkr.co/edit/AjDgoaUFky20vNCfu04O?p=preview

angular.module('app', []) 
 
    .controller('Ctrl', function($scope, $timeout) { 
 
    $scope.x = '#ff0000'; 
 
    $scope.res = ''; 
 
    $scope.a = function(x) { 
 
     console.log(x); 
 
     $scope.res = 'Color changed to ' + x; 
 
     $timeout(function(){$scope.res = ''}, 2000); 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Ctrl"> 
 
    <input type="color" ng-model="x" ng-change="a(x)"> 
 
    <p>{{res}}</p> 
 
</div>

Answer 2

AngularJS 1.3.0-beta.6 के बाद से, वहाँ एक ngModelOptions निर्देश है, पूरी तरह से आपकी समस्या के लिए अनुकूल है। यह आपको "मॉडल अपडेट कैसे किया जाता है" ट्यून करने की अनुमति देता है, जो कि आप पूरी तरह से खोज रहे हैं।

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

<input 
    type="color" 
    ng-model="color" 
    ng-model-options="{debounce: 500}" 
/>