ng if with angular for string contains

Question

I have the following Angular code:

<li ng-repeat="select in Items">   
         <foo ng-repeat="newin select.values">
{{new.label}}</foo>

How can I use an ng-if condition to look for a specific character:

ng-if="select.name == '?'" 

to only display the code when the character is here? The value I have is like 88?77 and the numbers are dynamic but the question mark is always there, I can't seem to filter based on that?

Answer 1

ES2015 UPDATE

ES2015 have String#includes method that checks whether a string contains another. This can be used if the target environment supports it. The method returns true if the needle is found in haystack else returns false.

ng-if="haystack.includes(needle)"

Here, needle is the string that is to be searched in haystack.

See Browser Compatibility table from MDN. Note that this is not supported by IE and Opera. In this case polyfill can be used.

---

You can use String#indexOf to get the index of the needle in haystack.

1. If the needle is not present in the haystack -1 is returned.
2. If needle is present at the beginning of the haystack 0 is returned.
3. Else the index at which needle is, is returned.

The index can be compared with -1 to check whether needle is found in haystack.

ng-if="haystack.indexOf(needle) > -1" 

---

For Angular(2+)

*ngIf="haystack.includes(needle)"

Answer 2

ng-if="select.name.indexOf('?') !== -1" 

Answer 3

All javascript methods are applicable with angularjs because angularjs itself is a javascript framework so you can use indexOf() inside angular directives

<li ng-repeat="select in Items">   
         <foo ng-repeat="newin select.values">
<span ng-if="newin.label.indexOf(x) !== -1">{{newin.label}}</span></foo>
</li>
//where x is your character to be found

Answer 4

Only the shortcut syntax worked for me *ngIf.

(I think it's the later versions that use this syntax if I'm not mistaken)

<div *ngIf="haystack.indexOf('needle') > -1">
</div>

or

<div *ngIf="haystack.includes('needle')">
</div>

Answer 5

In Angular2 you should consider using a (pure) pipe for this

You could consider adding your own custom "includes" pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'includes',
})
export class Includes implements PipeTransform {

  public transform(haystack: string, needle: string): boolean;
  public transform<T>(array: T[], item: T): boolean;
  public transform(haystack: any[]|string, needle: any|string): boolean {
    return haystack.includes(needle);
  }
}

This pipe would work both for finding items in an array or string in string searches.

You can use this pipe in the template as follows:

<div *ngIf="haystack | includes : needle">
  //...
<div>

---

Note: This seems like a lot of overhead since you could just do like suggested in the other answers:

<div *ngIf="haystack.includes(needle)">
  //...
</div>

But when using such a solution the includes mehtod will be called on each change detection, even in cases where the value of haystack didn't change. By using a pipe you will make sure it will only be executed when haystack has changed.
See for more information on this topic the official Angular documentation on pure pipes.

Answer 6

Do checks like that in a controller function. Your HTML should be easy-to-read markup without logic.

Controller:

angular.module("myApp")
.controller("myController",function(){
    var self = this;

    self.select = { /* ... */ };

    self.showFoo = function() {
        //Checks if self.select.name contains the character '?'
        return self.select.name.indexOf('?') != -1;
    }
});

Page example:

<div ng-app="myApp" ng-controller="myController as vm">
    <p ng-show="vm.showFoo()">Bar</p>
</div>