I have this little snippet of code to set the root.lowWeight and root.highWeight to my controller.

<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>

Controller model:

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

I know I could just use ng-model="root.lowWeight" to set the value, but ng-model triggers on element input event.

How can I either:

a) Send the input values in via assignWeights(param1, param2)

b) Change ng-model to trigger input on button click (seems hacky, less preferred solution)

I also know I could use JS/jQuery to trigger the input event and block the input event, but that's a last ditch effort I will 99.9% not do.

I have this little snippet of code to set the root.lowWeight and root.highWeight to my controller.

<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>

Controller model:

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

I know I could just use ng-model="root.lowWeight" to set the value, but ng-model triggers on element input event.

How can I either:

a) Send the input values in via assignWeights(param1, param2)

b) Change ng-model to trigger input on button click (seems hacky, less preferred solution)

I also know I could use JS/jQuery to trigger the input event and block the input event, but that's a last ditch effort I will 99.9% not do.

• javascript
• angularjs
• angular-ngmodel

Share Improve this question Follow edited Nov 23, 2015 at 16:32 yAnTar 4,6201010 gold badges5151 silver badges7474 bronze badges asked Nov 23, 2015 at 16:20 Sterling ArcherSterling Archer 22.4k1919 gold badges8585 silver badges121121 bronze badges 7

• not sure I understand correctly, but maybe you seek this: docs.angularjs/api/ng/directive/ngModelOptions – Nitsan Baleli Commented Nov 23, 2015 at 16:28
• I am not sure what you are trying to do, can't you just use ng-model, then the function assigns values to the model values? – trees_are_great Commented Nov 23, 2015 at 16:29
• @NitsanBaleli that's close, I could do ng-model-options="{ updateOn: 'blur' }" and the button click will "act" like a click event, but I'd like to have it purely assigned to the button. – Sterling Archer Commented Nov 23, 2015 at 16:31
• @Sam as I said, the ng-model is bound to the input event, so while it would work, it would not be bound to the button click. I need to have it assigned to the model when the button is clicked – Sterling Archer Commented Nov 23, 2015 at 16:32
• 2 one solution would be to assign it to the model under a different name - inputData.lowWeight, then function $scope.root.lowWeight = $scope.inputData.lowWeight on button click – trees_are_great Commented Nov 23, 2015 at 16:34

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

Solution using seperate scope object: 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
  }

In your assignWeights function, you could use a selector to retrieve the values of the inputs and then assign your scope variable values based on that. Just assign a name to each input.

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>

Controller:

$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