Question

我有一个带有复选框的Bootstrap 3前置文本字段。我希望禁用该字段，直到复选框为true，然后我不仅要启用它而是将焦点设置为它

我使用了以下代码，启用/禁用效果很好，但不确定如何设置焦点......

我可能会写一个指令，但我想知道是否有一些非常简单的方法来执行它，因为有禁用/启用

<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" name="cbprepend" ng-model="cbprepend">
    </span>
    <input type="text" id="cbprependfield" class="form-control" ng-disabled="!cbprepend">
</div>

Answer 1

使用指令的方法很好，但缺乏一些“棱角”。

这是另一种可能的解决方案。首先，创建指令：

.directive('checkableInput', function() {
return {
    restrict: 'E',
    templateUrl: 'your/template/dir/checkable-input.html',
    scope: {
        id: "@",
        model: "="
    },
    link: function (scope, element, attrs) {
        var input = element.find('#' + scope.id);
        scope.toggleFocus = function() {
            if(scope.model) {
                input.focus();
            } else {
                input.blur();
            }
        }
    }
  };
});

templateUrl中指定的模板如下所示：

<div class="input-group">
    <span class="input-group-addon" >
        <input type="checkbox" ng-model="model" ng-change="toggleFocus()">
    </span>
    <input type="text" ng-id="id" class="form-control" ng-enabled="model">
</div>

这是您使用它的方式：

<checkable-input id="cbprependfield" model="cbprepend" />

Answer 2

好的，我确实使用过指令，不确定这是否是最干净的方式，请给我一些批评......

.directive('pcb', function() {
return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {
        element.on({
            change: function(e) {
                if (element.is(':checked')) {
                    element.closest('.input-group').find('.focus-target').removeAttr('disabled')
                    element.closest('.input-group').find('.focus-target').focus();
                } else {
                    element.closest('.input-group').find('.focus-target').attr('disabled', 'disabled');
                    element.closest('.input-group').find('.focus-target').blur();
                }
            }
        });
    }
  };
});

使用html

<div class="input-group">
                    <span class="input-group-addon" >
                        <input type="checkbox" pcb ng-model="cbprepend">
                    </span>
                    <input type="text" id="cbprependfield" class="form-control focus-target" disabled>
                </div>

使用Angular JS中的复选框启用并将焦点设置为文本输入字段

2 个答案: