CODEWITHSUNDEEP
angularjs
mm1975
mm1975

Reputation: 1655

Change Style with ng-change

I use a dropdown from AngularJS bootstrap and want to change the font of an element. I try to this with ng-change.

HTML:

<p ng-style="fontStyle">Test</p>

<div class="btn-group" dropdown is-open="status4.isopen" id="fontselect">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ng-disabled="disabled" ng-change="fontStyle={'font':'Arial'};">
    {{ 'inv.theme.font' | translate }}<span class="caret"></span>
  </button>
<ul class="dropdown-menu" role="menu">
  <li><a href="#"><span style="font-family: Arial">Arial</span></a></li>
  <li><a href="#"><span style="font-family: Tahoma">Tahoma</span></a></li>
  <li><a href="#"><span style="font-family: Times New Roman">Times New Roman</span></a></li>
  <li><a href="#"><span style="font-family: Verdana">Verdana</span></a></li>
  <li><a href="#"><span style="font-family: Impact">Impact</span></a></li>
  <li><a href="#"><span style="font-family: Comic Sans MS">Comic Sans MS</span></a></li>

I get the following exception:

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found!

What´s going wrong? Thank you

Upvotes: 0

Views: 1991

Answers (1)

23tux
23tux

Reputation: 14746

ngChange always requires ngModel to be present (see https://docs.angularjs.org/api/ng/directive/ngChange).

So, just add a ng-model like this, and it should work:

  <button type="button" ng-model="myVar" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ng-disabled="disabled" ng-change="fontStyle={'font':'Arial'};">
    {{ 'inv.theme.font' | translate }}<span class="caret"></span>
  </button>

Upvotes: 2

Related Questions