CODEWITHSUNDEEP
angularjsangular-ng-if
Gowtham Raj
Gowtham Raj

Reputation: 37

ANGULAR JS ng-if

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'">

Upvotes: 0

Views: 1569

Answers (2)

JB Nizet
JB Nizet

Reputation: 691635

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

Upvotes: 1

Vivz
Vivz

Reputation: 6620

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>

Upvotes: 1

Related Questions