Невозможно получить значение ng-модели, если значение назначено из другой ng-модели

У меня возникла проблема с модельными значениями угловых. У меня есть три переменные области действия, связанные с входами с помощью нг-модели с помощью объекта под названием cfa: первый amt_type, второй amount и третий comp, в котором значение для comp будет зависеть от первых 2-х значений, то amt_type и amount , Но проблема в том, что когда я пытался отображать 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}}" />

Это нормально для меня, если я положу его в заявлении сНа или любых HTML-тегах, но как я могу поместить значение в переменном или каком-либо образом просто получить Общая? Спасибо :)

источник

2016-10-11 Mark Jerly Bundalian

Try объявляют 'cfa.comp' в вашем контроллере, как '$ scope.cfa = {Комп: 0};'. – DieuNQ

Хорошо, пробовал. Спасибо за ответ :) –

Вы должны сделать функцию, которая вызывается при каждом изменении 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>

источник

2016-10-11 04:19:05

О, это кажется действительно приятным спасибо. Я попробую. Спасибо :) –

Ваших нг-модель и значение атрибуты противоречивые для КФА-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>

источник

2016-10-11 04:34:38

Спасибо, что помогли мне :) он отобразил компиляцию по вашему синтаксису :), но есть и другая проблема. Коды повторяются несколько раз, скажем, 3 раза. все вычисления или возврат функции getComp также будут обработаны, чтобы получить общее количество. Как я должен это делать? Еще раз спасибо, сэр. Я очень ценю вашу помощь. –

В коде «дополнительная информация» вы используете одни и те же значения 'cfa.amt_type' и' cfa.amount' для вычисления двух разных значений 'cfa.compx'. Поскольку вы используете один и тот же экземпляр контроллера, 'cfa.comp1 = cfa.comp2' и' cfa.total = 2 * cfa.comp1'. Я подозреваю, что вам нужен массив объектов, каждый из которых содержит, по крайней мере, 'amt_type' и' amount'. Я бы порекомендовал использовать функцию для результата, поскольку вы получаете автоматическое обновление и гарантированную целостность таким образом, но вы можете передать ему индекс, чтобы указать, какой элемент массива работает. –

Невозможно получить значение ng-модели, если значение назначено из другой ng-модели

ответ

Смежные вопросы