Show a value or another depending on if it's present

Question

I have the following array:

vm.persons = [{id:1, name:'Manuel1', age:30}, {id:2, name:'Manuel2', errorCode:'Error', age:18}]

And I want to show in this way:

------------------
|Name    | Age   |
------------------
|Manuel2 | Error |
------------------
|Manuel1 | 30    |
------------------

So, if errorCode is present, the age should not be shown.

This is what I have right now:

    <tr ng-repeat="person in persons" ng-class="...">
      <td>{{::person.name}}</td>
      <td>{{::person.age}}</td>
    </tr>

How can I do that check. I'd like to show in first place the persons with error and then the rest. I think that you can do that with array.sort, right?

Use ng-show ng-hide read this https://scotch.io/tutorials/how-to-use-ngshow-and-nghide — Rohan Pawar, Mar 14 '16 at 11:42
see http://stackoverflow.com/questions/27490652/angular-default-value-if-binding-is-null — Paulo Scardine, Mar 14 '16 at 11:43

score 1 · Accepted Answer · answered Mar 14 '16 at 12:08

1

<tr ng-repeat="person in persons | orderBy:'errorCode'" ng-class="...">
  <td>{{::person.name}}</td>
  <td>{{::(!person.errorCode) ? person.age : 'Error'}}</td>
</tr>

answered Mar 14 '16 at 12:08

Yosvel Quintero

18,669
5
37
46

Thank you! Excellent answer. – Manuelarte Mar 14 '16 at 13:56

score 0 · Answer 2 · answered Mar 14 '16 at 11:45

I accomplish that using directive ng-if like so:

<tr ng-repeat="person in persons" ng-class="...">
  <td>{{::person.name}}</td>
  <td ng-if="person.age">{{::person.age}}</td>
</tr>

ng-if evaluate an expression, if true then shows the element... you could do something like ng-if="person.errorCode != 'Error'" or ng-if="!person.errorCode" you have to check for a true false expression that fit your needs...

score 0 · Answer 3 · answered Mar 14 '16 at 11:46

<tr ng-repeat="person in persons" ng-class="..."> <td>{{::person.name}}</td> <td>{{person.age == 'Error' ? '-' : ::person.age}}</td> </tr>

You need to show some text if you dont want to show age else your design will run if it does not finds a

score 0 · Answer 4 · answered Mar 14 '16 at 11:46

You should be able to use the ?: ternary operator which acts as a simple if/then-like expression. This evaluates the first term (before the ?). If it evaluates to true, the expression after the ? is returned. If it evaluates to false, the expression after the : is returned.

So {{::(person.errorCode ? person.errorCode : person.age)}} should work, tho I haven't tested it.

score 0 · Answer 5 · answered Mar 14 '16 at 11:46

use ng-if to print or not the col and colspan for prevent empty space

<tr ng-repeat="person in persons" ng-class="...">
    <td colspan="{{!person.errorCode ? '1' : '2'}}">{{::person.name}}</td>
    <td ng-if="!person.errorCode" >{{::person.age}}</td>
</tr>

score 0 · Answer 6 · answered Mar 14 '16 at 11:46

0

Try this -

 <tr ng-repeat="person in persons" ng-class="...">
      <td>{{person.name}}</td>
      <td ng-if="!person.errorCode">{{person.age}}</td>
      <td ng-if="person.errorCode">{{person.errorCode}}</td>
 </tr>

answered Mar 14 '16 at 11:46

Amit Sirohiya

333
1
13

score 0 · Answer 7 · answered Mar 14 '16 at 11:49

0

Use this code in order to make it work

  <tr ng-repeat="person in persons" ng-class="...">
  <td>{{person.name}}</td>
  <td>{{person.errorcode==""?person.age:person.errorcode}}</td>
  </tr>

answered Mar 14 '16 at 11:49

Hassan Tariq

730
7
15

score 0 · Answer 8 · answered Mar 14 '16 at 11:49

0

For ordering take a look at orderBy.

You could define a custom function returning 1 if the element is defined and 0 if not.

Conditional display is already explained in multiple answers.

answered Mar 14 '16 at 11:49

Aides

3,643
5
23
39

Show a value or another depending on if it's present

8 Answers8