清除与 Angular Bootstrap UI tabset 内的 textarea 关联的 ng-model 形成外部按钮 [英] Clear the ng-model asssociated to textarea inside Angular Bootstrap UI tabset form an outside button

问题描述

我使用 angular bootstrap ui tabset 创建两个选项卡，并且两个选项卡都有与 ng-model 关联的 textareas，我在 tabset 外有一个清除按钮，我想在用户按下清除按钮时清除活动选项卡中 textArea 的 ng-model.做这个的最好方式是什么?这是我到目前为止所做的.

I have used angular bootstrap ui tabset to create two tabs and both of the tabs have textareas associated with a ng-model, i have a clear button outside the tabset and i want to clear the ng-model of the textArea in active tab when user presses the clear button. what is the best way to do this? this is what i have done so far.

HTML

<tabset>
    <tab heading="Tab One">
        <textarea data-ng-model="data.tabOne" class="form-control"></textarea>
    </tab>
    <tab heading="Tab two">
        <textarea data-ng-model="data.tabOne" class="form-control"></textarea>
    </tab>
</tabset>
<button ng-click="clearFn()" class="btn btn-default btn-float-left">Clear</button>

控制器

.controller('myController', ['$scope', function ($scope) {
        $scope.data = {
            tabOne: '',
            tabTwo: ''
        };

        $scope.ClearFn = function () {
            // I want to clear the model of the active tabs textArea here.
        };
    }]);

推荐答案

您可以使用选项卡的 active 属性来查找当前活动的选项卡.

You could use the tab's active attribute to find the current active tab.

<tabset>
  <tab heading="Tab One" active="activeState.tabOne">
    <textarea ng-model="data.tabOne" class="form-control"></textarea>
  </tab>
  <tab heading="Tab Two" active="activeState.tabTwo">
    <textarea ng-model="data.tabTwo" class="form-control"></textarea>
  </tab>
</tabset>

在控制器中:

.controller('myController', ['$scope', function ($scope) {
  $scope.data = {
    tabOne: 'ONE',
    tabTwo: 'TWO'
  };

  $scope.activeState = {};

  $scope.clearFn = function() {
    // I want to clear the model of the active tabs textArea here.
    for (var key in $scope.activeState) {
      if ($scope.activeState[key]) {
        // active tab found
        $scope.data[key] = '';
        return;
      }
    }
  };
}])

Plunker 示例: http://plnkr.co/edit/ioJKua5XTeetBcvjGity?p=preview

这篇关于清除与 Angular Bootstrap UI tabset 内的 textarea 关联的 ng-model 形成外部按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！