Question

我遇到了角度模型值的问题。我有三个范围变量通过ng-model通过名为cfa的对象绑定到输入：第一个是amt_type，第二个是amount，第三个是comp，其中comp的值取决于前两个值amt_type和amount。但问题是当我尝试显示cfa.comp时，它不会显示，只能在键入绑定到cfa.comp模型的输入时显示。如何获得ng-model'cfa.comp'的值，还是有任何角度方法来解决我的问题？这是代码片段。非常感谢您的帮助。：）

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标签中，我可以，但是如何将值放在变量中或以任何方式获取总数？谢谢:)）

Answer 1

您应该创建一个在amt_type或amount更改时调用的函数，并删除这三个输入。见下面的例子：

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>

Answer 2

你的ng-model和value属性对cfa-comp来说是冲突的。我个人喜欢“控制器为”和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>

如果从另一个ng-model

2 个答案: