ANGULAR JS ng-if

Question

I am trying to learning angular JS and I am an absolute beginner.I tried using ng-if directives to print 'Mr or Mrs or Ms' according to the their gender and relationship status.When I bind the married model within the div tag it is giving out the correct value .But the binding after that prints true every time. Are there any other ways to check conditions ? Moreover I tried checking conditions with the controller , why doesn't that work? Please help!

<body ng-app="myApp" ng-controller="myFirstController" ng- init="first='';last='';gender='Male';married='true'">
    <input type="text" data-ng-model="first">
    <input type="text" data-ng-model="last">

    <label for="gender">GENDER </label>
    <input type="radio" name="gender" data-ng-model="gender" value="Male" /> MALE
    <input type="radio" name="gender" data-ng-model="gender" value="Female" /> FEMALE
    <br>
    <br>

    <div ng-if="gender==='Female'">
        <input type="radio" name="married" data-ng-model="married" value="true" /> MARRIED
        <input type="radio" name="married" data-ng-model="married" value="false" /> UNMARRIED
        <br>
        <br> {{married}}

    </div>
    <span ng-if="gender==='Male'">MR.</span>
    <span ng-if="gender!=='Male'">
    <span ng-if="married=='true'">MRS.</span>
    <span ng-if="married=='false'">MS.</span> </span>{{first }} {{last}} {{married}}
    <div ng-app="" ng-init="myCol='lightblue'">

JB Nizet · Accepted Answer · 2017-07-07 06:57:43Z

Replace your ng-if="gender==='Female'" by ng-show="gender==='Female'", and it will work fine.

The reason is that ng-if creates its own child scope, and the married property is thus set on this child scope rather than the controller scope.

The appropriate fix would be to avoid binding directly to properties of the scope, but to bind to properties of an object in the scope:

In your controller:

$scope.model = {};

In your view:

<input type="radio" name="married" data-ng-model="model.married" value="true"/>

(and same for all your properties, of course).

You should also never use ng-init. Just initialize your model from your controller:

$scope.model = {
  gender: 'Male',
  married: 'false'
};

Finally, a boolean would be a much better choice for the value of married that a string containing 'true' or 'false'. You can achieve that using ng-value rather than value:

<input type="radio" name="married" data-ng-model="married" ng-value="true"/> 
MARRIED 
<input type="radio" name="married" data-ng-model="married" ng-value="false"/> 
UNMARRIED

<span ng-if="married">MRS.</span>
<span ng-if="!married">MS.</span>

Complete demo

Yes I have tested it and I can see from your answer why my answer is not correct. Thanks for pointing it out. :) But I will leave my answer as it is since it might be helpful for others in the future
if($scope.model.married==1) {$scope.model.address="MRS."; } else {$scope.model.address="MS."; }
@GowthamRaj Why do you want to compare a boolean with a number? A boolean is already a boolean.

Marcus Höglund · Accepted Answer · 2017-07-07 06:38:06Z

1

The problem is that your checks are on strings like <span ng-if="married=='true'">MRS.</span> but the ng-model for input checkbox binds it to boolean true or false. So change your code in such a way that wherever there is check with true or false, it should be boolean value instead of string 'true' or 'false'

This

<span ng-if="married=='true'">MRS.</span>
<span ng-if="married=='false'">MRS.</span>

Should be

<span ng-if="married">MRS.</span>
<span ng-if="!married">MRS.</span>

edited Jul 7, 2017 at 6:38

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

answered Jul 7, 2017 at 6:32

Vivz

6,6282 gold badges19 silver badges34 bronze badges

2 Comments

JB Nizet Over a year ago

Well, just test it, and you'll see.

Gowtham Raj Over a year ago

Thanks for trying to help me out !

Collectives™ on Stack Overflow

ANGULAR JS ng-if

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related