angularjs 中的字体 select 下拉列表

Question

我想创建一个可以更改给定文本字体的表单，我对下拉框进行了编码，但很难获得它的值并且 font.I 的预览想要更改"Text Is".

的字体

这是我的html代码

<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>

这是我的控制器

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;
        }
    })

这是我的指令

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);
            }
        }
    });

Answer 1

试试下面的代码。

HTML代码

    <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 控制器代码

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;
    }
});

在select列表中发送字体值。在控制器中将 selected 字体设置为 selectedFont 范围。此范围将用于 HTML 设置字体。

angularjs 中的字体 select 下拉列表

Font select drop down list in angularjs

fonts

google-webfonts

angularjs