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

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

Angular에 간단한 계산기를 만들어서 내가 원하면 합계를 덮어쓸 수 있게 하려고 해.이 부분은 동작하고 있습니다만, 1 또는 2개의 필드에 번호를 입력하기 위해서 돌아가면, 합계치는 필드에 갱신되지 않습니다.

제 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;
    };
}

추가할 수 있습니다.ng-change명령어를 입력합니다.문서의 예를 참조하십시오.

합계 필드에 값을 입력하면 값 표현이 덮어쓰게 됩니다.

그러나 다른 접근방식을 취할 수 있습니다.합계값의 필드를 만듭니다.또, 다음의 어느쪽인가에 해당하는 경우는,one또는two변경 시 해당 필드가 갱신됩니다.

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

javascript를 변경합니다.

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

예를 들어, 여기를 만지작거려라.

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>      

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/

지시문을 만들고 감시합니다.

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

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

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

})

언급URL : https://stackoverflow.com/questions/12685185/angular-js-update-input-field-after-change