How to display single element if condition with Angular JS

Question

I want to display a select box if the value of a single_variable is true or just unity if not a single_variable is false

I try this:

<div ng-if="question.unity_variable == true"> <select> <option data-ng-repeat="unit in question.unity">{{unit.value}}</option> </select> </div> <div ng-if="question.unity_variable == false || question.unity_variable == ''"> {{question.unity}} </div> 

And this:

 <div ng-show="question.unity_variable == true" ng-hide="question.unity_variable == false || question.unity_variable == ''"> <select> <option data-ng-repeat="unit in question.unity">{{unit.value}}</option> </select> </div> <div ng-show="question.unity_variable == false || question.unity_variable == ''"> {{question.unity}} </div> 

therefore, if I didn’t put ng-show, which make a choice box for each question with a unit or display twice, but do not meet the condition ... Please help me find my mistake!

EDIT:

My Json looks like it displays controls for creating a form:

 {"id": "01", "questions": [ {"name": "confidential data", "dbcolumn":"confidential data", "control": "input", "default_value": "", "unity": [{"value": "mmol/l"}, {"value": "autre"}], "unity_variable": true, "isnull": 0, "size":"180px", "data_type":"number", "max_length": 3}, {"name": "confidential data", "dbcolumn":"confidential data", "control": "input", "default_value": "", "unity": "", "isnull": 1, "size":"180px", "data_type":"number", "max_length": 2}, {"name": "confidential data", "dbcolumn":"confidential data","control": "select", "default_value": [{"name":"Femme", "value": "Femme"}, {"name":"Homme", "value": "Homme"}], "unity": "", "isnull": 0, "size":"196px", "data_type":"string"} ] } 

My html code is:

 <table style="display: inline-block; float: left; max-width: 510px;"> <tr data-ng-repeat="question in group.questions"> <td>{{question.name}}</td> <td> <div ng-switch on="question.control" style="display: inline-block;"> <div ng-switch-when="input"> <input type="text" style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" placeholder="{{question.default_value}}" maxlength="{{question.max_length}}" /> </div> <div ng-switch-when="textarea"> <textarea style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" placeholder="{{question.default_value}}"></textarea> </div> <div ng-switch-when="checkbox"> <input type="checkbox" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}" />{{question.default_value}} </div> <div ng-switch-when="select"> <select style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}"> <option data-ng-repeat="choice in question.default_value" value="{{choice.value}}">{{choice.name}}</option> </select> </div> <div ng-switch-when="p"> <p style="width: {{ question.size }};" data-isnull="{{question.isnull}}" name="{{question.dbcolumn}}" id="{{question.dbcolumn}}"><b>{{question.default_value}}</b></p> </div> <div ng-switch-default> <!-- default action --> </div> </div> </td> <td> <div ng-if="question.unity_variable == true"> <select> <option data-ng-repeat="unit in question.unity">{{unit.value}}</option> </select> </div> <div ng-if="question.unity_variable == false || question.unity_variable == ''"> {{question.unity}} </div> </td> </tr> 

if I try just the code:

 <div ng-if="1 == 1">true</div> <div ng-if="1 == 2">false</div> 

The result shows me true and false, so I see a syntax error

Answer 1

This works for me:

 <div ng-if="question.unity_variable"> <select> <option data-ng-repeat="unit in question.unity">{{unit.value}}</option> </select> </div> <div ng-if="!question.unity_variable"> {{question.unity}} </div> 

Answer 2

As of 8/6/2013 you should use Angular.js "unstable" version 1.1.5 to use ngIf. If you started with angular -seed, it uses the "stable" version 1.0.7, which does not support ngIf.