清除Angular Bootstrap UI选项卡集内与textarea相关联的ng模型,形成一个外部按钮

PIKP

我已经使用角度引导UItabset来创建两个标签并且两个翼片都textareas具有一个相关联的ng-model,我有外部的清除按钮tabset,我想清除ng-modeltextArea在活动选项卡时用户按下清除按钮。做这个的最好方式是什么?这是我到目前为止所做的。

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

您可以使用选项卡的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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Angular清除所有bootstrap-ui模态吗?

来自分类Dev

使用Angular清除所有bootstrap-ui模态吗?

来自分类Dev

Angular UI Bootstrap选项卡+ ng-include

来自分类Dev

Angular slickgrid 不显示在动态选项卡内(ngx-bootstrap 选项卡集)

来自分类Dev

Angular UI Bootstrap-当未选择“ Typeahead”下拉列表值时清除模型值?

来自分类Dev

Angular UI Bootstrap Typeahead ng-model清除字段时说为空

来自分类Dev

Angular JS清除按钮

来自分类Dev

如何使用ng-show / ng-hide隐藏Angular Bootstrap UI中的选项卡

来自分类Dev

如何使用ng-show / ng-hide隐藏Angular Bootstrap UI中的选项卡

来自分类Dev

使用Angular UI / Bootstrap UI隐藏选项卡标题

来自分类Dev

Angular Bootstrap中的选项卡

来自分类Dev

Angular-Bootstrap UI选项卡:“删除”选项卡选项

来自分类Dev

使用Angular UI Bootstrap在动态创建的选项卡上设置活动选项卡

来自分类Dev

Angular UI-Bootstrap选项卡:未设置活动选项卡

来自分类Dev

Angular UI-Bootstrap选项卡:未设置活动选项卡

来自分类Dev

ui-bootstrap滚动选项卡:防止第一个选项卡移动

来自分类Dev

如何在angularjs UI-Bootstrap中创建一个可关闭的选项卡

来自分类Dev

Angular Bootstrap选项卡未获得输入字段

来自分类Dev

选项卡中的select()函数-Angular Bootstrap

来自分类Dev

Angular + bootstrap-ui,检查当前选项卡是否已激活

来自分类Dev

ui-bootstrap(Angular.JS)中的选项卡的淡入效果

来自分类Dev

Contenteditable指令不适用于Angular UI Bootstrap选项卡

来自分类Dev

Angular和bootstrap UI选项卡均处于活动状态,以防止出现默认情况

来自分类Dev

angular ui bootstrap选项卡组件:未单击选项卡处于活动状态时如何获取选项卡内容

来自分类Dev

清除Bootstrap DatePicker值

来自分类Dev

清除Bootstrap DatePicker值

来自分类Dev

angular-ui-router和angular-ui-bootstrap选项卡:内容多次加载到DOM中

来自分类Dev

Angular Bootstrap UI-仅折叠一个元素

来自分类Dev

Bootstrap X可编辑的文本区域清除按钮

Related 相关文章

  1. 1

    使用Angular清除所有bootstrap-ui模态吗?

  2. 2

    使用Angular清除所有bootstrap-ui模态吗?

  3. 3

    Angular UI Bootstrap选项卡+ ng-include

  4. 4

    Angular slickgrid 不显示在动态选项卡内(ngx-bootstrap 选项卡集)

  5. 5

    Angular UI Bootstrap-当未选择“ Typeahead”下拉列表值时清除模型值?

  6. 6

    Angular UI Bootstrap Typeahead ng-model清除字段时说为空

  7. 7

    Angular JS清除按钮

  8. 8

    如何使用ng-show / ng-hide隐藏Angular Bootstrap UI中的选项卡

  9. 9

    如何使用ng-show / ng-hide隐藏Angular Bootstrap UI中的选项卡

  10. 10

    使用Angular UI / Bootstrap UI隐藏选项卡标题

  11. 11

    Angular Bootstrap中的选项卡

  12. 12

    Angular-Bootstrap UI选项卡:“删除”选项卡选项

  13. 13

    使用Angular UI Bootstrap在动态创建的选项卡上设置活动选项卡

  14. 14

    Angular UI-Bootstrap选项卡:未设置活动选项卡

  15. 15

    Angular UI-Bootstrap选项卡:未设置活动选项卡

  16. 16

    ui-bootstrap滚动选项卡:防止第一个选项卡移动

  17. 17

    如何在angularjs UI-Bootstrap中创建一个可关闭的选项卡

  18. 18

    Angular Bootstrap选项卡未获得输入字段

  19. 19

    选项卡中的select()函数-Angular Bootstrap

  20. 20

    Angular + bootstrap-ui,检查当前选项卡是否已激活

  21. 21

    ui-bootstrap(Angular.JS)中的选项卡的淡入效果

  22. 22

    Contenteditable指令不适用于Angular UI Bootstrap选项卡

  23. 23

    Angular和bootstrap UI选项卡均处于活动状态,以防止出现默认情况

  24. 24

    angular ui bootstrap选项卡组件:未单击选项卡处于活动状态时如何获取选项卡内容

  25. 25

    清除Bootstrap DatePicker值

  26. 26

    清除Bootstrap DatePicker值

  27. 27

    angular-ui-router和angular-ui-bootstrap选项卡:内容多次加载到DOM中

  28. 28

    Angular Bootstrap UI-仅折叠一个元素

  29. 29

    Bootstrap X可编辑的文本区域清除按钮

热门标签

归档