Javascript 清除与textarea inside Angular Bootstrap UI选项卡集关联的ng model form a outside按钮

我使用angular bootstrap ui

tabset

创建了两个选项卡，两个选项卡都有与

ng型号

关联的

textArea

，我在

tabset

外有一个clear按钮，当用户按下clear按钮时，我想清除活动选项卡中

textArea

的

ng型号

。最好的方法是什么？这就是我到目前为止所做的

HTML

---

由于ng模型执行范围双向绑定，为了清除ng模型，可以清除范围变量

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

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

---

您可以使用选项卡的

active

属性来查找当前活动选项卡

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

---

示例Plunker:

谢谢，但我想清除活动选项卡中的ng型号。这样我无法确定活动选项卡是否正确？谢谢，这就是我想要的：）

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

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

<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;
      }
    }
  };
}])