Question

我想创建一个可以改变给定文本字体的表单，我编写了下拉框，但很难得到它的值和字体的预览。我想改变字体的字体“文字是”。

这是我的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;
    }
});

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

angularjs中的字体选择下拉列表

1 个答案: