tabset 阻止表更新 [英] tabset prevents table update

查看：26 发布时间：2021/11/10 4:15:06 angularjs angular-ui-bootstrap

本文介绍了tabset 阻止表更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个带过滤器的工作表:http://plnkr.co/edit/WnV7OUplcLHVOKbeTrSw?p=preview

将其包装在标签集中后，它停止工作(过滤器仍在更新):http://plnkr.co/edit/8uw2UhSC59txms5X563L?p=preview

但在我更新之前它适用于旧版本:http://plnkr.co/edit/eJvYtpc3efkydsQy8caL?p=preview

(angular 1.0.8 + bootstrap 2.0.3 + angular-ui-bootstrap-0.6.0)

为什么更新后停止工作?

解决方案

http://plnkr.co/edit/70sLuA4gltgxhwTE0XT1

HTML(只是修改了过滤器的用法)

<html ng-app="plunker"><头><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script><script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script><script src="example.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="样式表"><身体><div ng-controller="TabsDemoCtrl"><标签集><tab header="破碎的过滤器"><form class="form-inline" role="form"><select id="okFilterbox" ng-model="okFilterBool"><option>nothing</option><option>all</option></选择></表单><p>{{okFilterBool}}</p><div><表格><tr ng-repeat="项目中的项目 | filterItem:okFilterBool"><td>{{item.name}}</td></tr>

</tab><tab header="tab2"></tab>

</html>

JS(更改了过滤器的定义方式以创建新的Angular"过滤器)

angular.module('plunker', ['ui.bootstrap']);var TabsDemoCtrl = 函数($scope){$scope.okFilterBool = "all";$scope.items = [{名称:'A'}，{名称:'B'}，{名称:'C'}];};angular.module("plunker").filter("filterItem", function(){返回函数(数组，okFilterBool){if(okFilterBool == "all"){ 返回数组；}返回 [];}})

I have a working table with a filter: http://plnkr.co/edit/WnV7OUplcLHVOKbeTrSw?p=preview

After wrapping it in a tabset it stops working (the filter is still updated): http://plnkr.co/edit/8uw2UhSC59txms5X563L?p=preview

But it worked with old versions before I updated: http://plnkr.co/edit/eJvYtpc3efkydsQy8caL?p=preview

(angular 1.0.8 + bootstrap 2.0.3 + angular-ui-bootstrap-0.6.0)

Why did it stop working after the update?

解决方案

http://plnkr.co/edit/70sLuA4gltgxhwTE0XT1

HTML (Just modified the filter usage)

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="TabsDemoCtrl">
  <tabset>
     <tab heading="broken filter">
     <form class="form-inline" role="form">
          <select id="okFilterbox" ng-model="okFilterBool">
                 <option>nothing</option>
                     <option>all</option>
            </select>
      </form>
      <p>{{okFilterBool}}</p>
      <div>
        <table>
          <tr ng-repeat="item in items | filterItem:okFilterBool">
            <td>{{item.name}}</td>
          </tr>
        </table>
      </div>
    </tab>

    <tab heading="tab2">
    </tab>


</div>
  </body>
</html>

JS (Changed the way the filter is defined to make a new 'Angular' filter)

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {

  $scope.okFilterBool = "all";

  $scope.items = [
    { name: 'A'},
    { name: 'B'},
    { name: 'C'}
  ];

};

angular.module("plunker").filter("filterItem", function(){
  return function(array, okFilterBool){
        if(okFilterBool == "all"){ return array; }
          return [];
    }
})

这篇关于tabset 阻止表更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

tabset 阻止表更新 [英] tabset prevents table update

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

tabset 阻止表更新 [英] tabset prevents table update

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭