Question

我正在尝试根据特定条件将焦点从离子按钮上移开。选择按钮后，我将使用CSS更改按钮的颜色，并且希望有条件地删除此“活动”状态。

$scope.editItem = function(item){
        $scope.editMode = true;
        $scope.activeItem = angular.copy(item);
        $('.editMode1').show();
        $('.addMode1').hide();
        $('.myBox').hide();
        };

    $scope.createItem = function(item){
        $scope.editItem({});
    };

    $scope.saveItem = function(){
        console.log($scope.activeItem);
        //delete $scope.activeItem.hash_method
        var objectToSave = {

            name: $scope.activeItem.name,
            id: $scope.activeItem.id
        };

        if($scope.activeItem.id){
            defaultAdapter.query('UPDATE reasons SET name = :name WHERE id =:id ',
              { replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
            ).then(defaultAdapter.query('SELECT rt.transaction_type,rt.reasons_id FROM reason_to_transaction rt INNER JOIN ',{type: Sequelize.QueryTypes.UPDATE}))
            .then(projects => {
              console.log(projects);
              $scope.editMode = false;
                $scope.activeItem = false;
                $scope.refresh();
            });
        } else {
            defaultAdapter.query('INSERT INTO reasons SET name = :name',
              { replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
            ).then(projects => {
              console.log(projects);
              $scope.editMode = false;
                $scope.activeItem = false;
                $scope.refresh();
            });

        }

    };

简而言之，我追求的功能类似于：

如果用户选择了一个答案，但答案不正确，那么它将不再具有焦点。

我已经尝试了下面的代码，该代码基于另一篇文章，该文章显示了如何使用输入字段管理焦点，但是它似乎不起作用，并会产生“不是函数”错误：

HTML

ion-button.ion-color-primary:active {
    --ion-color-base: #fff !important;
    --ion-color-contrast: var(--ion-color-primary) !important;
    border: 1px solid var(--ion-color-primary);
}

TypeScript

 <ion-button (click)="checkTrue()" color="primary"id="next" #next>Next</ion-button>

我还在文档中注意到，按钮上有一个名为“ ionBlur”的事件，因此您可以在按钮上的模糊事件中使事物运动。但是，我没有找到触发模糊事件的方法。

最后，我发现this post 在做类似的事情。我尝试应用它没有任何运气。在甚至没有添加任何建议的代码之前，我注意到“ active”类已短暂添加到按钮中。但是实际上几乎已将其删除，但是按钮的样式仍显示为具有焦点。

是否有人对如何从离子按钮上删除“活动”状态有任何建议？任何建议将不胜感激！

Answer 1

您可以这样做，

<ion-button (click)="checkTrue()" [ngClass]="{'conition' : active}" color="primary"id="next" #next>Next</ion-button>

您只需要在HTML文件中执行此操作，而在checkTrue函数中的ts中，您只需检查connition变量的值并将其设置为true或false。

在离子按钮上触发模糊事件

1 个答案: