Разделить общее целое число на два поля с помощью Angular JS

#javascript #angularjs

#javascript #angularjs

Вопрос:

Я создал 3 числа типа ввода, и это в основном сложение двух значений для получения общего числа. Моя проблема заключается в том, что когда я ввожу значение в поле для общей суммы; я хочу, чтобы оно автоматически разделялось на два поля ввода. например, #1: 9 # 2: 3 # Итого: 12 и если итоговое значение редактируется пользователем и, возможно, там указано значение 100у меня должно быть # 1: 15 # 2: 5 # Всего: 20

Примечание: число 1 и число 2 можно отредактировать, чтобы получить только общую сумму, но при редактировании суммы она должна быть разделена на число 1 и число 2.

HTML:

 <div ng-app="myApp" ng-controller="addvalue">

<p>Input something in the input box:</p>
<p>Number 1: <input type="number" ng-change="update()" ng-model="firstNumber"></p>
<p>Number 2: <input type="number" ng-change="update()" ng-model="secondNumber"></p>
<p>Total Sum: <input type="number" ng-change="update()" ng-model="total">{{total}}</p>
</div>
 

JAVASCRIPT :

 var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {

$scope.$watch('one   two   three', function(value) {
$scope.total = value;
});
$scope.change = function() {
  if (istotal) {
    $scope.firstNumber = $scope.total / 2;
    $scope.secondNumber = $scope.total / 4;
  } else {
    $scope.total = $scope.firstNumber   $scope.secondNumber;
  }
}

});
 

Комментарии:

1. Если вы ставите значение 100, оно должно быть 75 и 25, верно?

2. Кроме того, можете ли вы сами отредактировать номер 1 и номер 2? Например, я ввожу 20, он показывает 15 и 5. Если я введу 18 в число 1, должно ли оно обновить число 2 до 6 и итого до 24? Или только редактирование общего количества должно вызывать обновления других полей?

3. да @ Джефф Кэри за первый вопрос. Число 1 и Число 2 можно отредактировать, чтобы получить только сумму. но когда сумма редактируется, она должна разделиться на число 1 и число 2.

Ответ №1:

Попробуйте передать логический параметр в update(). В случае чисел 1 и 2 оставьте его как ng-change = "update(false)" . и для общего числа сохраните его как ng-change = "update(true)" . В контроллере.

 $scope.update(isTotal) {
    if(istotal) { 
        $scope.firstNumber = 3 * $scope.total / 4;
        $scope.secondNumber = 1 * $scope.total / 4;
    } else {
        $scope.total = $scope.firstNumber   $scope.secondNumber;
    }
}
 

Комментарии:

1. Разве нет необходимости возвращать значения в операторе if?

2. Нет. возврат не требуется, так как Angular использует двустороннюю привязку, значения будут обновляться автоматически.