【问题标题】:tabset prevents table updatetabset 防止表更新
【发布时间】:2014-03-18 20:12:43
【问题描述】:

我有一个带过滤器的工作表: 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)

为什么更新后就停止工作了?

【问题讨论】:

  • 看起来过滤器定义不正确,我会修复它并发布一个 plunkr 你还应该指出你正在升级 angular 版本(不是 bootstrap 或 ui-bootstap 版本)跨度>
  • 那么为什么它可以在没有 tabset 的情况下工作,而在旧的 angular 版本中使用 tabset 呢?
  • 嗨 Ido 对不起,我不熟悉过滤器的用法,所以我不确定为什么它在新版本中不起作用,但我对其进行了修改以定义过滤器,我如何看待它们完成并作为答案发布。

标签: angularjs angular-ui-bootstrap


【解决方案1】:

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

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

<!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(更改了过滤器的定义方式以制作新的“Angular”过滤器)

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-15
    • 2020-06-27
    • 2014-08-04
    相关资源
    最近更新 更多