CODEWITHSUNDEEP
angularjs
RichC
RichC

Reputation: 7879

How to allow for a fallback on empty values in ng-options

The field object has three properties: label, name, and value

I need to set the <option> text equal to the label property unless it's null. If it's null, then I need to use the name property for the text. If that's empty, I need to fallback to use the value property for the text. How can I make this cascade so that I don't have "undefined" for the text if the property is null?

<select ng-model="c.field" ng-options="f.label for f in c.fields">
    <option value="">-- Select an Option --</option>
</select>

Upvotes: 0

Views: 346

Answers (1)

Jaydo
Jaydo

Reputation: 1859

How about this? ng-options="(f.label || f.name || f.value) for f in c.fields"

var app = angular.module("app", []);

app.controller("controller", function() {
  var vm = this;
  
  vm.fields = [
    {
      label: "label",
      name: "name",
      value: "value"
    },
    {
      label: null,
      name: "name",
      value: "value"
    },
    {
      name: "",
      value: "value"
    }
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller as c">
  <select ng-model="c.field" ng-options="(f.label || f.name || f.value) for f in c.fields">
    <option value="">-- Select an Option --</option>
  </select>
  
  Selected field: {{c.field | json}}
</div>

Upvotes: 2

Related Questions