I want display a select box if unity_variable equals true or just the unity if not unity_variable equals false
I ve 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>
so if i didn't put the ng-show that make for each question a select box with unity or display the twice but not respect the condition... Please help to find my mistake !
EDIT :
My Json look like this for displaying controls to build 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 simply code :
<div ng-if="1 == 1">true</div>
<div ng-if="1 == 2">false</div>
The result show me true and false so i ve a syntaxe error
How to show/hide data when the particular condition is true in AngularJS ? In AngularJS, in order to hide or show data or content, we can use the *ngIf structural directive. By using this, we can evaluate conditions and then *ngIf based on the condition displays the content.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With