Angular issue when ng-if is 0

Question

I have a issue when the ng-if="expression value is 0" it does no work as it is believed to be.

Here is the link to the plunker : http://plnkr.co/edit/dILXSIHHzvuv1nhbxdga?p=info

On change of select, I'm using the model value to show particular text box.

<select ng-model="location.locationSchedule.scheduleType" 
    ng-options="schedule.id as schedule.name for schedule in scheduleTypes track by schedule.id">
   <option value="">Choose a Schedule Type</option>
</select>

And the input field

<input ng-model="location.locationSchedule.frequency" 
    placeholder="Enter Week No." 
    ng-if="location.locationSchedule.scheduleType == 0"/>
<input ng-model="location.locationSchedule.frequency" 
    placeholder="Enter Week No." 
    ng-if="location.locationSchedule.scheduleType == 1"/>

If the location.locationSchedule.scheduleType == 1 it displays the particular textbox, but not when it is 0

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

That's because of the parent ngIf

Replace

ng-if="location.locationSchedule.scheduleType != ''"

with

ng-if="location.locationSchedule.scheduleType !== ''"

Or anything more suitable (cf Implied string comparison, 0='', but 1='1')

edited May 23 '17 at 11:45

Community

1
1

answered Jan 23 '17 at 19:50

ValLeNain

2,232
1
18
37

Got it.. !! Thank you. – Deepak Bandi Jan 23 '17 at 19:54
Have one more question, I have initialized the value to be 2, but still it does not select the right option, have any idea? http://plnkr.co/edit/DmvqkS9SqTfRQQH59p72?p=preview – Deepak Bandi Jan 23 '17 at 20:33
I'd say it's because it's not able to make the binding in the other way around (he's able to fill `location.locationSchedule.scheduleType` with the correct value when you select an option, but if you change the model directly, it's not able to find the corresponding option) – ValLeNain Jan 23 '17 at 21:58
1

for example, if you init your model with `$scope.location.locationSchedule.scheduleType = {id: 2};` you'll see the correct option will be selected (I know it's not what you want because you expect an integer and not an object in your model, but this is how Angular works) – ValLeNain Jan 23 '17 at 22:09
Thanks @VaILeNain. – Deepak Bandi Jan 23 '17 at 22:22

score 1 · Answer 2 · edited Jan 23 '17 at 19:53

1

Change

ng-if="location.locationSchedule.scheduleType != ''"

to

ng-if="location.locationSchedule.scheduleType !== ''"

beacause 0 == '', both are falsy, but their types are not the same.

edited Jan 23 '17 at 19:53

str

42,689
17
109
127

answered Jan 23 '17 at 19:51

MeTe-30

2,512
2
21
30

Got it.. !! Thank you. – Deepak Bandi Jan 23 '17 at 19:54
Have one more question, I have initialized the value to be 2, but still it does not select the right option, have any idea? http://plnkr.co/edit/DmvqkS9SqTfRQQH59p72?p=preview – Deepak Bandi Jan 23 '17 at 20:33

Anthony C · Answer 3 · 2017-01-23T20:17:19.193

1

~~Not sure why everyone is comparing scheduleType !== ''~~ Now I see why, please include the div html in your question for clarity.

To the question of comparing 0, you can do it by putting strictly comparison, including !== '', === 0, etc

<div class="form-group days-list" ng-if="location.locationSchedule.scheduleType !== ''">
    <input ng-model="location.locationSchedule.frequency" 
        placeholder="Enter Week No." 
        ng-if="location.locationSchedule.scheduleType === 0"/>
    <input ng-model="location.locationSchedule.frequency" 
        placeholder="Enter Week No." 
        ng-if="location.locationSchedule.scheduleType === 1"/>

http://plnkr.co/edit/JWBz4QlhLDHrNiMo36zI?p=preview

edited Jan 23 '17 at 20:17

answered Jan 23 '17 at 19:56

Anthony C

2,117
2
15
26

Have one more question, I have initialized the value to be 2, but still it does not select the right option, have any idea? http://plnkr.co/edit/DmvqkS9SqTfRQQH59p72?p=preview – Deepak Bandi Jan 23 '17 at 20:33
1

Try with this in the ng-option `ng-options="schedule.id as schedule.name for schedule in scheduleTypes"` – Anthony C Jan 23 '17 at 20:57

Angular issue when ng-if is 0

3 Answers3