Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple ng-models on one input field?

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?

like image 820
tx291 Avatar asked Apr 04 '15 15:04

tx291


People also ask

Can we use 2 ngModel in angular?

Two-way binding still exists in Angular 2 and ngModel makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

Can ngModel have multiple values?

The solution is ng-bind-template, it can bind more than one {{}} expression, so it can show more than a single value that was declared in the Script function.

What is [( ngModel )]?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

What is difference between ng-model and Ng bind?

ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable.


Video Answer


1 Answers

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>
like image 131
prabu rajaraman raja Avatar answered Nov 02 '22 23:11

prabu rajaraman raja