Filter uppercase with ng-options

Question

I didn't find how to uppercase or uppercase first letter in ng-options.

My select:

<select ng-model="company.currency.code" ng-options="currency.code as currency.code for currency in currency_list>
</select>

In controller:

$scope.currency_list = [
    {
        code: 'eur'
    }, {
        code: 'usd'
    }
];

I'd like to print "EUR", "USD", or "Eur", "Usd" without looping manually my object.

Is that possible to do this?

Iridize

Answer 1

This should work:

ng-options="currency.code as (currency.code | uppercase) for currency in currency_list"

See the filter docs: https://docs.angularjs.org/api/ng/filter/uppercase

Neurotic

Answer 2

Use uppercase filter.

Take a look at this

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.currency_list = [
    {
        code: 'eur'
    }, {
        code: 'usd'
    }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="ArrayController">
    <select ng-model="company.currency.code" ng-options="currency.code as (currency.code | uppercase) for currency in currency_list | uppercase">
</select>
</div>

Condone

Like those inline-runnable code a lot! It took me some googling to find the recent blog entry about runnable code (blog.stackoverflow.com/2014/09/… ). Neat. Will do that too, in the future. – Neurotic

Answer 3

You can easily use a css approach for this by attaching a class to the

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.currency_list = [
      {
          code: 'eur'
      }, {
          code: 'usd'
      }
    ];
});

.text-capitalize{ text-transform: capitalize }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="ArrayController">
    <select 
      class="text-capitalize"
      ng-model="company.currency.code"
      ng-options="currency.code as currency.code for currency in currency_list">
    </select>
</div>

Eleemosynary

Answer 4

You can use this attribute:
ng-options="currency.code | uppercase for currency in currency_list"

Gennie