How to display one element if condition with Angular JS

Question

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 !

enter image description here

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

yes i m in AngularJS v1.0.7, i try it but in the offical website the last version is AngularJS v1.0.8... Thx ;) — Ema.H
– Ema.H, Commented Sep 12, 2013 at 12:06
Can you create a fiddle? Sorry..I meant version 1.1.5. You can download the newer versions from here: code.angularjs.org — AlwaysALearner
– AlwaysALearner, Commented Sep 12, 2013 at 12:10
Difficult because all data are from a json file etc... but i try to do something near ^^ — Ema.H
– Ema.H, Commented Sep 12, 2013 at 12:16

AlwaysALearner · Accepted Answer · 2014-07-04 11:15:20Z

13

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>

edited Jul 4, 2014 at 11:15

answered Sep 12, 2013 at 12:36

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AlwaysALearner Over a year ago

You are missing unity_variable in some of your objects. You have empty unity fields as well.

Ema.H Over a year ago

yes i know that , not a soucy at this moment ;) but this part of code doesn't works for me... it try with the 1.1.5 version of angular

AlwaysALearner Over a year ago

You need to use v1.1.5

The Whiz of Oz · Accepted Answer · 2013-10-10 15:42:37Z

0

As of 8/6/2013 you must use the 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.

answered Oct 10, 2013 at 15:42

The Whiz of Oz

7,1039 gold badges54 silver badges91 bronze badges

Collectives™ on Stack Overflow

How to display one element if condition with Angular JS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related