angularjs bootstrap ng-repeat not working inside tab

Question

I am trying to build a tab using angularjs ui-bootstrap.Got the tab working.

Below the tab, have content displayed using ng-repeat. In one of the tabs, wanted to do search on the listed contents in ng-repeat. But the search is not working.

If I move the search box out of tab, it is working.

HTML Code:

<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>

Placeholder will help you find the working one.

JS Code:

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

};

Complete Code in plunker: http://plnkr.co/edit/xDEP8W?p=preview

This is why I like to initialize everything in my controller that I plan on using/needing. The tabset creates its own scope, that the controller doesn't have access to. If you put $scope.searchnotworking = {}; $scope.searchworking = {}; in your controller, it works. That's because the input's ng-model will look in the closest scope (tabset) and set the model on that scope. And the filters only truly work as long as you use the correct thing to filter by (filter:searchnotworking.title) - plnkr.co/edit/ntJQRGsvXp5LtwbSi4zz?p=preview — Ian
– Ian, Commented Jul 22, 2014 at 20:56

Dylan · Accepted Answer · 2014-07-22 20:56:11Z

2

if you just add $scope.searchnotworking = []; to the js it will initialize. Not entirely sure why it wouldn't otherwise, $scope I suppose.

answered Jul 22, 2014 at 20:56

Dylan

4,7831 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs bootstrap ng-repeat not working inside tab

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related