44

必要に応じて合計をオーバーライドできる単純な計算機を 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>

JavaScript

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

5 に答える 5

40

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

于 2012-10-02T11:50:21.690 に答える
28

合計フィールドに値を入力すると、値式が何らかの形で上書きされると思います。

ただし、別の方法を使用することもできます。合計値のフィールドを作成し、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;
    });
}

ここにフィドルの例があります。

于 2012-10-02T09:23:23.707 に答える
5

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>
于 2015-05-06T01:04:33.483 に答える
3

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/

于 2013-03-25T09:56:58.970 に答える
-3

ディレクティブを作成し、ウォッチを配置します。

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

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

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

}))

于 2013-02-16T00:30:20.347 に答える