Multiple ng-models on one input field?

angularjs forms angular-ngmodel
tx291 picture tx291 · Apr 4, 2015 · Viewed 40.7k times · Source

I have a form, and a list of items. I used ng-model="searchFor" to filter out the list of items appropriately (this part is working fine), but I also want to "submit" the item that's filtered out -- which would require ng-model="adding_item.name" on the input field as well (I think).

Can you have multiple ng-models on one input field? Is there another way around this?

Answer

prabu rajaraman raja picture prabu rajaraman raja · Jan 13, 2016

Try using ng-change event to capture model value and assign it to other input element with its own ng-model.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <input type="text" ng-model="input" ng-change="input1=input;input2=input; " />
  <input type="hidden" ng-model="input1" />
  <input type="hidden" ng-model="input2" />
  <br>Model
  <br>{{input | uppercase}}
  <br>Model 1
  <br>{{input1 | uppercase}}
  <br>Model 2
  <br>{{input2 | uppercase}}
</div>

Related questions

Disable submit button when form invalid with AngularJS

I have my form like this: <form name="myForm"> <input name="myText" type="text" ng-model="mytext" required /> <button disabled="{{ myForm.$invalid }}">Save</button> </form> As you may see, the button …

Read More
How can I conditionally require form inputs with AngularJS?

Suppose we're building an address book application (contrived example) with AngularJS. We have a form for contacts that has inputs for email and phone number, and we want to require one or the other, but not both: We only want …

Read More
AngularJS does not send hidden field value

For a specific use case I have to submit a single form the "old way". Means, I use a form with action="". The response is streamed, so I am not reloading the page. I am completely aware that a typical …

Read More