変更後の角度JS更新入力フィールド

StackOverflow https://stackoverflow.com//questions/12685185

  •  12-12-2019
  •  | 
  •  

質問

私は私が欲しいのであれば、私が合計を上書きすることができる角度で単純な電卓を構築しようとしています。このパートが機能していますが、I SOINDの数字で戻るに戻ると、そのフィールド内で1つまたは2つの合計が更新されません。

これは私のjsfiddle

フォーム 

<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>
.

JavaScript 

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

役に立ちましたか？

解決

入力フィールドにng-changeディレクティブを追加できます。docs 例 を見てください。

他のヒント

どういうわけか上書きされる合計フィールドに値を入力すると、推測しています。

しかし、代替手法を実行することができます。総値のフィールドを作成し、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;
    });
}
.

例fiddle

私はあなたが望む任意の式にNGモデルをバインドするために使用できる指令を書きました。式が変更されたときはいつでもモデルが新しい値に設定されます。 

 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());
   }
.

}）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top