CODEWITHSUNDEEP
angularjsfontsgoogle-webfonts
shamila
shamila

Reputation: 1330

Font select drop down list in angularjs

I want to create a form that can change the font of the text given,I coded the drop down box but it is hard to get the value of it and the preview of the font.I want to change the font of the "Text Is".

This is my html code

<body ng-controller="MyCtrl">

 <div>
        <select ng-model="font" ng-options="font as font.label for font in fonts" ng-change="change(opt)"></select>
        <h3>
            Text Is
        </h3>
        <div id="tstDiv" testdir opt="opt">
        </div>

    </div>
</body>

This is my controller

app.controller("MyCtrl", function ($scope) {
        $scope.fonts = [
            {
                value: 'Arial',
                label: 'Arial'
            },
            {
                value: 'Tahoma',
                label: 'Tahoma'
            }
        ];
        $scope.opt = $scope.fonts[0];
        $scope.change = function (option) {
            $scope.opt = option;
        }
    })

This is my derective

app.directive('testdir', function () {
        return {
            scope: {opt: '='},
            link: function (scope, element, attrs) {
                scope.$watch('opt', function (newvalue, oldvalue) {
                    if (newvalue === oldvalue) return;
                    else
                        document.getElementById('tstDiv').innerHTML = newvalue.title;
                }, true);
            }
        }
    });

Upvotes: 1

Views: 2313

Answers (1)

Sameer K
Sameer K

Reputation: 799

Try below code.

HTML Code

    <body ng-controller="MyCtrl">
        <div>
            <select ng-model="font" ng-options="font as font.label for font in fonts" ng-change="change(font)"></select>
            <h3><font face="{{selectedFont}}">Text Is</font></h3>
        </div>
    </body>

AngularJS controller code

app.controller("MyCtrl", function ($scope) {
    $scope.fonts = [
       {
          value: 'Arial',
          label: 'Arial'
        },
        {
          value: 'Tahoma',
          label: 'Tahoma'
        }
    ];
    $scope.selectedFont = '';
    $scope.change = function (option) {
       $scope.selectedFont = option.value;
    }
});

In select list sending font value. In controller setting selected font to selectedFont scope. This scope will be used to HTML to set font face.

Upvotes: 3

Related Questions