Conditional AngularJS model binding

Question

Is there a way I can use conditional AngularJS data binding?

I want to bind my model to vm.ABC if bool has true value, if it has false, I want to bind my model to vm.XYZ.

and when does this condition happen, like at the time bootstraping or later — Rakesh Chand
– Rakesh Chand, Commented Sep 6, 2017 at 11:08

Ankit Agarwal · Accepted Answer · 2017-09-06 11:12:35Z

3

You can use ng-if for this. Here is the simple example,

//if bool is true then bind vm.ABC
<input type='text' ng-if='bool' ng-model='vm.ABC' />

//if bool is false then bind vm.XYZ
<input type='text' ng-if='!bool' ng-model='vm.XYZ' />

This will work great for your condition. And also by using ng-if the HTML is not render on the UI if the condition is false.

edited Sep 6, 2017 at 11:12

answered Sep 6, 2017 at 11:07

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rakesh Chand Over a year ago

This is not what OP asked, he is asking for ng-model binding, read the question again

Ankit Agarwal Over a year ago

That was just an example. However i have changed it.

Rakesh Chand · Accepted Answer · 2017-09-06 11:10:58Z

3

<div ng-init="vm.thirdVar = bool ? vm.ABC : vm.XYZ">
    <input type="text" ng-model="vm.thirdVar">
</div>

vm.thirdVar define this in controller

answered Sep 6, 2017 at 11:10

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

4 Comments

A Hassan Over a year ago

let me give it a try

Rakesh Chand Over a year ago

are you using AngularJS or Angular2

A Hassan Over a year ago

I'm using AngularJs 1.6

A Hassan Over a year ago

Thanks for the help @Rakeschand

Collectives™ on Stack Overflow

Conditional AngularJS model binding

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related