Question

我使用了角度引导ui tabset来创建两个标签，并且两个标签都与textareas关联ng-model，我在tabset外面有一个清除按钮当用户按下清除按钮时，我想清除活动标签中ng-model的{{1}}。做这个的最好方式是什么？这是我到目前为止所做的。

HTML

textArea

控制器

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

Answer 1

您可以使用标签的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>

并在控制器中：

.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

Answer 2

由于ng-model使用范围双向绑定，因此为了清除ng-model，可以清除范围变量。

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

清除与Angular Bootstrap UI选项卡内部的textarea关联的ng-model形成一个外部按钮

2 个答案: