AngularJS: don't show part of string if value is empty in repeater

Question

I have an ng-repeat in a select menu:

<label>Country</label>
    <select name="seller-country" class="form-control input-sm">
      <option ng-repeat="c in countries | orderBy:predicate" value="{{c.code}}">{{c.code}} ({{c.name}}) </option>
    </select>

The first item in the data is empty, as in

{
  "countries": [{
     "name": "",
     "code": ""
     }, ...

I set up the binding above so the menu items will read as in CA (Canada), so for the empty string it reads (). I'd like to not show the parens for the empty string.

UPDATE The answer below is indeed correct, but in this case I was the one who added the empty first item in a misguided attempt to get an empty select item before checking the Angular docs for select. It seems you can do exactly what I was trying to do by simply adding an extra first option item:

<select name="seller-country" class="form-control input-sm">
      <option value="">Choose...</option>
      <option ng-repeat="c in countries | orderBy:predicate" value="{{c.code}}">{{c.code}} ({{c.name}}) </option>
    </select>

Malek Hijazi · Accepted Answer · 2014-12-08 15:54:10Z

1

  <option ng-repeat="c in countries | orderBy:predicate"
     ng-if="c.code != '' && c.name!= '' && c.code != null && c.name!= null" 
     value="{{c.code}}">{{c.code}} ({{c.name}}) </option>

answered Dec 8, 2014 at 15:54

Malek Hijazi

4,1621 gold badge28 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: don't show part of string if value is empty in repeater

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related