値が別のngモデルから割り当てられている場合、ngモデルの値を取得できません

角度のモデル値に問題が発生しました。、最初はamt_typeである第二は、amountであり、第3は、amt_typeとamountcompの値は最初の2つの値に依存しているcompある：私はcfaと呼ばれるオブジェクトを介してNGモデルを介して入力に結合している3つのスコープ変数を有します。しかし問題は、私がcfa.compを表示しようとしたときに表示されず、cfa.compモデルにバインドされた入力に入力したときにのみ表示できることです。どのようにしてng-model 'cfa.comp'の価値を得ることができますか、または問題を解決する角度のある方法がありますか？コードスニペットは次のとおりです。助けてくれてありがとう。 :)値が別のngモデルから割り当てられている場合、ngモデルの値を取得できません

var app = angular.module('myApp', []); 
 

 
app.controller('sampleCtrl', function($scope){ 
 
    $scope.cfa = {}; 
 
});

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 
<div ng-controller = "sampleCtrl"> 
 
    <select ng-model="cfa.amt_type"> 
 
    <option value="D">Daily</option> 
 
    <option value="W">Weekly</option> 
 
    <option value="M">Monthly</option> 
 
    </select> 
 
    
 
    <input type="number" ng-model="cfa.amount" /> 
 
    
 
    <input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp" value="{{cfa.amount * 7}}" /> 
 
    <input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp" value="{{cfa.amount}}" /> 
 
    <input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp" value="{{cfa.amount/4}}" /> 
 

 
    {{cfa.comp}} 
 
</div> 
 
</body> 
 
</html>

追加情報：上記

コードが異なるモデル名で数回繰り返されると、合計を取得するために使用されます。セイ：

<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp1" value="{{cfa.amount * 7}}" /> 
 
    <input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp1" value="{{cfa.amount}}" /> 
 
    <input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp1" value="{{cfa.amount/4}}" /> 
 

 
<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp2" value="{{cfa.amount * 7}}" /> 
 
    <input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp2" value="{{cfa.amount}}" /> 
 
    <input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp2" value="{{cfa.amount/4}}" /> 
 

 
    <input type="number" ng-model="cfa.total" value="{{cfa.comp1 + cfa.comp2}}" />

をそれは私がdivの文または任意のHTMLタグに入れますなら、私のために大丈夫ですが、どのように私は、変数または任意の方法で値を置くことができるだけで取得します合計？ありがとう:)

出典

2016-10-11 Mark Jerly Bundalian

'$ scope.cfa = {COMP：0}のようなあなたのコントローラ内のTry宣言 'cfa.comp';'。 – DieuNQ

よろしいですか。答えをありがとう:) –

amt_typeまたはamountが変更されたときに呼び出される関数を作成し、3つの入力を削除する必要があります。あなたのNG-モデルと値の属性がCFA-COMPのために競合している

var app = angular.module('myApp', []); 
 

 
app.controller('sampleCtrl', function($scope){ 
 
    $scope.cfa = {}; 
 
    //this function will be bound to the ng-change of the select list and input for amount 
 
    $scope.updateComp = function() { 
 
     if ($scope.cfa.amount) { 
 
      $scope.cfa.comp = $scope.cfa.amount; 
 
      if ($scope.cfa.amt_type == 'D') { 
 
       $scope.cfa.comp = $scope.cfa.amount * 7; 
 
      } 
 
      if ($scope.cfa.amt_type == 'M') { 
 
       $scope.cfa.comp = $scope.cfa.amount/4; 
 
      } 
 
     } 
 
    };  
 
});

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 
<div ng-controller = "sampleCtrl"> 
 
    <select ng-model="cfa.amt_type" ng-change="updateComp()"> 
 
    <option value="D">Daily</option> 
 
    <option value="W">Weekly</option> 
 
    <option value="M">Monthly</option> 
 
    </select> 
 
    
 
    <input type="number" ng-model="cfa.amount" ng-change="updateComp()" /> 
 
<div> Comp: {{cfa.comp}} </div> 
 
</div> 
 
</body> 
 
</html>

出典

2016-10-11 04:19:05

ああ、それは本当に良い感謝のようです。私はそれを試してみます。ありがとう:) –

：以下の例を参照してください。私は個人的には "コントローラとして"とVMの構文が好きなので、その代替案を提供します。また、結果フィールドは読み取り専用でなければなりません。

var app = angular.module('myApp', []); 
 

 
app.controller('sampleCtrl', function(){ 
 
    vm = this; 
 
    
 
    vm.getComp = function() { 
 
    switch (vm.amt_type) { 
 
     case 'D': 
 
      return vm.amount * 7; 
 
     case 'W': 
 
      return vm.amount; 
 
     case 'M': 
 
      return vm.amount/4; 
 
     default: 
 
      return undefined; 
 
    } 
 
    } 
 
});

#comp { 
 
    margin-left: 5px; 
 
}

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 
<div ng-controller = "sampleCtrl as ctrl"> 
 
    <select ng-model="ctrl.amt_type"> 
 
    <option value="D">Daily</option> 
 
    <option value="W">Weekly</option> 
 
    <option value="M">Monthly</option> 
 
    </select> 
 
    
 
    <input type="number" ng-model="ctrl.amount" /> 
 
    
 
    <span id="comp">{{ctrl.getComp()}}</span 
 
</div> 
 
</body> 
 
</html>

出典

2016-10-11 04:34:38

私を助けていただきありがとうございます:)それはあなたの構文によって計算を表示:) :)しかし、別の問題があります。コードは数回、例えば3回繰り返される。すべての計算またはgetComp関数の戻り値も処理され、合計を取得します。私はそれをどうすればいいのですか？もう一度おねがいします。 –

"追加情報"コードでは、同じ 'cfa.amt_type'と' cfa.amount'の値を使って2つの異なる 'cfa.compx'値を計算します。同じコントローラインスタンスを使用しているので、 'cfa.comp1 = cfa.comp2'と' cfa.total = 2 * cfa.comp1'です。私はあなたが少なくとも 'amt_type'と' amount'を含んでいるオブジェクトの配列が必要だと思っています。あなたは自動更新とそのような保証された完全性を得るので、私はまだ結果の関数を使うことをお勧めしますが、関数が動作している配列要素を指すインデックスを渡すことができます。 –

値が別のngモデルから割り当てられている場合、ngモデルの値を取得できません

答えて

関連する問題