Angularjs: How to get value of input without ng-model

Question

I need to make some inputs by ng-repeat, and in my json file I have in object where is a property called name, like this:

"url":"find_company",
    "values":[
      {
        "name":"company name",
        "type":"input_search"
      },{
        "name":"company_phone",
        "type":"input_search"
      }
    ]

I want to make search in DB, in search you can find by any field or by two or more field. Field called the same as property of object. So by ng-keyup I need to send to my function

search(field, value)

two arguments. I want to do something like this

<div ng-repeat="value in param.values">
    <input ng-if="value.type == 'input_search'" 
           ng-keyup="search(value.name, this.text)" 
           type="text">

How can a send to function text of this input without using ng-model? Where this.text is value of input.

Well I added example of how you can use `ngModel` because it's angularjs and not using `ngModel` seem wrong /unnecessary to me. — Alon Eitan, Jun 05 '17 at 12:41
Thanks, your example helps me. The problem was that I didn't know how to use ng-model and to save the input empty, no you show me) — kliukovking, Jun 05 '17 at 12:49

score 4 · Answer 1 · answered Jun 05 '17 at 12:37

since you are using ng-keyup, you can retrieve input value with $event.target.value.

comment: this is fit for normal event like onclick, but not fit for angular.

refer the below example.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.showValue = function(val) {
      alert(val);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <input type="test" ng-keyup="showValue($event.target.value)">
</div>

score 1 · Accepted Answer · answered Jun 05 '17 at 12:40

This is how you do it with ngModel:

<div ng-repeat="value in param.values">
    <input ng-if="value.type == 'input_search'" ng-model="value.val" ng-keyup="search(value)" type="text">

And in your controller:

$scope.search = function( item ) {
    console.log( item.val ); // Here you have the value using ngModel
    console.log( item.name ); // Here you have the "name" property of the element inside the loop
}

As you can see, you CAN use ngModel and by passing the object itself to the function you can access its properties from the function in the controller.

Note that there's that this.text in the view - I don't know what it is exactly so I dropped it from the example to make things clearer, but you can use it in your code of course.

score 1 · Answer 3 · answered Jun 05 '17 at 12:50

I know the question said without using ng-model. But I suspect you may want this because you want to customize when data-binding occurs. If that's the case, you can use ng-model-options with ng-change:

<input type="text" ng-model="yourModel" ng-model-options="{ updateOn: 'keyup' }" ng-change="search()" />

ng-change fires when the model has been updated, which is after keyup in this case. So the value of yourModel will be up to date when search() executes.

Angularjs: How to get value of input without ng-model

3 Answers3