Установите значение ng-модели на нажатие кнопки

Question

У меня есть этот небольшой фрагмент кода для установки root.lowWeight и root.highWeight на мой контроллер.

<input type="number" placeholder="Enter Low Range..." class="form-control input-xs"> 
<input type="number" placeholder="Enter High Range..." class="form-control input-xs"> 
<button class="btn btn-primary" ng-click="assignWeights()">Select Model</button> 

Контроллер Модель:

//set the initial root scope to empty object 
$scope.root = {}; 
//define root weight 
$scope.root.lowWeight = 0; 
$scope.root.highWeight = 0; 

Я знаю, что я мог бы просто использовать ng-model="root.lowWeight", чтобы установить значение, но нг-модель срабатывает на элемент input события.

Как я могу либо:

а) Отправить входные значения в с помощью assignWeights(param1, param2)

б) Изменение нг-модель, чтобы вызвать вход на кнопку мыши (кажется Hacky, менее предпочтителен раствор)

Я также знаю, что могу использовать JS/jQuery для запуска события ввода и блокировки входного события, но это последнее усилие канавки, которое я не буду 99.9% делать.

Answer 1

Решение используя отдельный объект Область применения: plunkr

HTML:

Low: <input type="text" name="lowRange" ng-model="inputData.lowWeight"> 
High: <input type="text" name="highRange" ng-model="inputData.highWeight"> 

Js:

$scope.assignWeights = function() { 
     $scope.lowWeight = $scope.inputData.lowWeight; 
     $scope.highWeight = $scope.inputData.highWeight 
    } 

Answer 2

В функции assignWeights вы можете использовать селектор для получения значений входов, а затем назначить значения переменной области видимости на основе этого. Просто назначьте имя для каждого ввода.

E.g.

<input type="number" placeholder="Enter Low Range..." class="form-control input-xs" name="lowRange"> 
<input type="number" placeholder="Enter High Range..." class="form-control input-xs" name="highRange"> 
<button class="btn btn-primary" ng-click="assignWeights()">Select Model</button> 

Контроллер:

$scope.assignWeights = function() { 
    $scope.root.lowWeight = document.querySelector('input[name="lowRange"]').value 
    $scope.root.highWeight = document.querySelect('input[name="highRange"]').value 
} 

Plunker: http://plnkr.co/edit/lm8GFA0CD0zWwgAMSLah?p=preview