Блог

У меня есть текстовое поле Bootstrap 3 с добавлением флажка. Я хочу, чтобы поле было отключено до тех пор, пока флажок не будет установлен, а затем я хочу не только включить его, но и установить на него фокус

Я использовал следующий код, и включение / отключение отлично работает, но не уверен, как установить фокус…

Я, вероятно, напишу директиву, но мне было интересно, есть ли какой-нибудь очень простой способ сделать это, как это было для отключения / включения

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

Ваш подход с использованием директивы хорош, но ему не хватает некоторой «угловатости».

Вот еще одно возможное решение. Сначала создайте директиву:

 .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" />
 

Хорошо, я использовал директиву, не уверен, что это самый чистый способ, пожалуйста, дайте мне немного критики…

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