2

I'm working on a Store application and I need to show 2 different strings based on a response.

If I receive the response with no item title I need to show "No Item Title Found", else, I need to show item's title limited to a certain amount of characters.

Here is my code:

<div ng-switch on="item.title">
  <div ng-switch-when="!item.title.length">
    <p class="prod-title cursor-pointer" 
       ng-click="searchCtrl.openItemTab(item,event)">
         {{ item.title = 'Title Not Found'}}</p>
  </div>
  <div ng-switch-default>
    <p class="prod-title cursor-pointer" 
       ng-click="searchCtrl.openItemTab(item,event)">
         {{ item.title | limitTo:60 }}</p>
  </div>
</div>

I'm able to see Items titles when their length is greater than 0, but, I'm not able to see "No Item Title Found" when length is equal to 0.

Any suggestion? Thanks in advance.

AndreaM16
  • 3,917
  • 4
  • 35
  • 74
  • Can you replace `{{ item.title = 'Title Not Found'}}` with `Title Not Found` – koox00 May 16 '16 at 14:18
  • I already tried both Title not found and {{Title Not Found}} without success. – AndreaM16 May 16 '16 at 14:19
  • 2
    even though you were able to get ng-if to work, you should note that ng-switch-when does not allow for expressions, like koox00 said. It must be a literal value to compare with. I would guess that when you expected your title length to be zero, it was in fact a null value causing things to blow up. The ng-if solution is actually checking if the property is null and not if the length is zero...But glad you have a solution now. – TSmith May 16 '16 at 14:52
  • @TSmith `ng-switch-when` can't be an expression but `ng-switch on` can have an expression, see [ngSwich](https://docs.angularjs.org/api/ng/directive/ngSwitch). – koox00 May 16 '16 at 15:03
  • @koox03 I know that. My comment doesn't contradict how ng-switch works. – TSmith May 16 '16 at 18:57
  • Oh sorry @TSmith, I didn't notice the `-when` and took your comment the wrong way. – koox00 May 16 '16 at 19:27

2 Answers2

3

use ng-if directive to show 'Title not found' when you don't have an available title.

<p ng-if='!item.title' class="prod-title cursor-pointer" ng-click="searchCtrl.openItemTab(item,event)">
         Title Not Found
</p>

<p ng-if='item.title' class="prod-title cursor-pointer" ng-click="searchCtrl.openItemTab(item,event)">
             {{item.title}}
    </p>
fablexis
  • 578
  • 7
  • 18
1

Make the ng-switch like:

<div ng-switch on="item.title.length">
    <div ng-switch-when="0">

Currently what you have means
if item.title (expression) equals true (!item.title.length == item.title) enter the first block
in any other case enter the second.

Plunker

koox00
  • 2,691
  • 2
  • 15
  • 25
  • Hi, thanks for the answer, but, It does not seem to work. – AndreaM16 May 16 '16 at 14:30
  • It seems to work in the Plunker but not in my application. Look at what @TSmith wrote above. – AndreaM16 May 16 '16 at 14:54
  • I cannot see why it wouldn't work in your application..Anyway I was just pointing out the flaw in your logic, @fablexis solution is best for your case as you have only one condition :) – koox00 May 16 '16 at 15:13