从外部按钮中清除与 Angular Bootstrap UI 选项卡集中的 textarea 关联的 ng-model

Posted 2023-03-05

【中文标题】从外部按钮中清除与 Angular Bootstrap UI 选项卡集中的 textarea 关联的 ng-model

【英文标题】：Clear the ng-model asssociated to textarea inside Angular Bootstrap UI tabset form an outside button

【发布时间】：2014-09-27 15:07:22

【问题描述】：

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

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

【参考方案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

【讨论】：

谢谢，这就是我想要的:)

【参考方案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 ='';
           ;
    ]);

【讨论】：

谢谢，但我想清除活动选项卡的 ng-model。这样我就无法确定活动标签对了吗？