javascript - angularjs bootstrap ng-repeat 在选项卡内不起作用

Question

我正在尝试使用 angularjs ui-bootstrap 构建一个选项卡。让选项卡正常工作。

在选项卡下方，使用 ng-repeat 显示内容。在其中一个选项卡中，想要搜索 ng-repeat 中列出的内容。但搜索不起作用。

如果我将搜索框移出选项卡，它就可以工作。

HTML 代码:

<tabset>
    <tab heading="Static title">Static content
      Enter text to search
    <input id="search" type="text" class="form-control" ng-model="search.title" placeholder="this is not working">  
    </tab>

    <tab select="alertMe()">
      <tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>
  <input id="search" type="text" class="form-control" ng-model="search.title" placeholder="this is working">
  <hr />

  <div ng-repeat="tab in tabs | filter:search">
      {{tab.content}}
  </div>

占位符将帮助您找到可用的占位符。

JS 代码:

var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:'one', content:'Dynamic content 1' },
    { title:'two', content:'Dynamic content 2'}
  ];

};

plunker中的完整代码:http://plnkr.co/edit/xDEP8W?p=preview

Answer 1

如果你只是将 $scope.searchnotworking = []; 添加到 js 中，它将初始化。不完全确定为什么不会，我想是 $scope。