변경 후 각도 JS 업데이트 입력 필드

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 지시문을 입력 필드에 추가 할 수 있습니다.docs 예제 .

Answer 2

저는 aludhowht uppritten을 눌러야합니다.

그러나 대체 방법을 취할 수 있습니다. 총 값에 대한 필드를 만들고 one 또는 two가 해당 필드를 업데이트 할 때.

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

.

및 자바 스크립트 변경 :

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

.

예제 여기 .

Answer 3

NG-MODEL을 원하는 표현식에 바인딩하는 데 사용할 수있는 지시문을 썼습니다.표현식이 변경 될 때마다 모델이 새 값으로 설정됩니다.

 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>      

.

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

지시문을 만들고 시계를 넣으십시오.

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

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

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

.

})