AngularJS - Change expression dynamically

Question

I would need to display different prices for the same item depending on the currency chosen by the user (the different prices are already provided from the backend, so there is no need to do any further conversion). I would like to change the expression with ng-click

My html goes like this:

<div ng-controller="myCtrl">
  you have, {{exchange.[currency]}}...
  <br>
  <br>
  <select>
    <option ngclick="currency='USD'">USD</option>
    <option ngclick="currency='Eur'">Eur</option>
  </select>
</div>

And my controller:

var app = angular.module('myApp', []);
  // controller here
app.controller('myCtrl', function($scope) {

    $scope.currency = "USD";

    $scope.exchange = [{
      "USD": 199,
      "Eur": 20
    }]; 
  })

You can check the code above in a JSfiddle here

remove dot on second line html {{exchange.[currency]}} must be {{exchange[currency]}} — aseferov
– aseferov, Commented Apr 24, 2016 at 21:37

BeS · Accepted Answer · 2016-04-24 21:37:15Z

1

This is how you could do this the Angular way.

HTML:

<div ng-controller="myCtrl">
  you have, {{currency.rate}} {{currency.code}}
  <br>
  <br>
  <select ng-options="currency.code for currency in exchange" ng-model="currency"></select>
</div>

Controller

var app = angular.module('myApp', []);
  // controller here
app.controller('myCtrl', function($scope) {
    $scope.exchange = [{
      "code": "USD",
      "rate": 199
    },
    {
      "code": "EUR",
      "rate": 20
    }]; 
    $scope.currency = $scope.exchange[0];
  })

answered Apr 24, 2016 at 21:37

BeS

8174 silver badges9 bronze badges

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

1 Comment

Joe82 Over a year ago

That was exactly what I was looking for. Thanks a lot!

Collectives™ on Stack Overflow

AngularJS - Change expression dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related