परिवर्तन के बाद कोणीय जेएस अपडेट इनपुट फ़ील्ड

Question

मैं कोणीय में एक साधारण कैलकुलेटर बनाने की कोशिश कर रहा हूं जिसमें मैं चाहता हूं कि कुल मिलाकर मैं ओवरराइड कर सकूं। मेरे पास यह हिस्सा काम कर रहा है लेकिन जब मैं एक या दो फ़ील्ड में किसी संख्या में प्रवेश करने के लिए वापस जाता हूं तो कुल क्षेत्र में अपडेट नहीं होता है।

यहाँ मेरी jsfiddle http://jsfiddle.net/YUza7/2/

रूप

<div ng-app> 
    <h2>Calculate</h2> 

    <div ng-controller="TodoCtrl"> 
    <form> 
     <li>Number 1: <input type="text" ng-model="one"> 
     <li>Number 2: <input type="text" ng-model="two"> 
     <li>Total <input type="text" value="{{total()}}">  
     {{total()}} 
    </form> 
    </div> 
</div> 

जावास्क्रिप्ट

function TodoCtrl($scope) { 
    $scope.total = function(){ 
     return $scope.one * $scope.two; 
    }; 
} 

Answer 1

आप इनपुट क्षेत्रों के लिए ng-change निर्देश जोड़ सकते हैं। दस्तावेज़ example पर एक नज़र डालें।

Answer 2

मेरा अनुमान है कि है कि जब आप योग के क्षेत्र में एक मान दर्ज करें कि मूल्य अभिव्यक्ति किसी भी तरह हो जाता है है ओवरराइट।

हालांकि, आप एक वैकल्पिक दृष्टिकोण ले सकते हैं: कुल मूल्य के लिए एक फ़ील्ड बनाएं और जब one या two उस फ़ील्ड को अपडेट करें।

<li>Total <input type="text" ng-model="total">{{total}}</li> 

और जावास्क्रिप्ट बदलने के लिए:

function TodoCtrl($scope) { 
    $scope.$watch('one * two', function (value) { 
     $scope.total = value; 
    }); 
} 

उदाहरण बेला here।

Answer 3

निर्देश बनाएं और उस पर एक नजर डालें।

app.directive("myApp", function(){ 
link:function(scope){ 

    function:getTotal(){ 
    ..do your maths here 

    } 
    scope.$watch('one', getTotals()); 
    scope.$watch('two', getTotals()); 
    } 

})

Answer 4

तुम सिर्फ अपने html

<form> 
    <li>Number 1: <input type="text" ng-model="one"/> </li> 
    <li>Number 2: <input type="text" ng-model="two"/> </li> 
     <li>Total <input type="text" value="{{total()}}"/> </li>  
    {{total()}} 

</form> 

http://jsfiddle.net/YUza7/105/

Answer 5

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

module.directive('boundModel', function() { 
     return { 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ngModel) { 
      var boundModel$watcher = scope.$watch(attrs.boundModel, function(newValue, oldValue) { 
      if(newValue != oldValue) { 
       ngModel.$setViewValue(newValue); 
       ngModel.$render(); 
      } 
      }); 

      // When $destroy is fired stop watching the change. 
      // If you don't, and you come back on your state 
      // you'll have two watcher watching the same properties 
      scope.$on('$destroy', function() { 
       boundModel$watcher(); 
      }); 
     } 
    }); 

आप इस तरह अपने टेम्पलेट में इसका इस्तेमाल कर सकते हैं:

<li>Total<input type="text" ng-model="total" bound-model="one * two"></li>