angularjs中的字体选择下拉列表_Angularjs_Fonts_Google Webfonts

angularjs中的字体选择下拉列表

angularjs fonts

angularjs中的字体选择下拉列表,angularjs,fonts,google-webfonts,Angularjs,Fonts,Google Webfonts,我想创建一个表单，可以更改给定文本的字体，我对下拉框进行了编码，但很难获得它的值和字体预览。我想更改“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>

我想创建一个表单，可以更改给定文本的字体，我对下拉框进行了编码，但很难获得它的值和字体预览。我想更改“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.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);
            }
        }
    });

试试下面的代码

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>

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

我只想预览我在文本中选择的字体的目的是什么。

不清楚。你能详细解释一下吗？或者如果可能的话，你能为它创建小提琴吗？就像在微软word中一样，当我选择字体时，文本字体（text Is）应该会根据我从下拉框中选择的字体而改变。OK现在很清楚了。让我查一下。。。。

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

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