JSFiddle - React, Tailwind, and code Playground

by mhevery

HTML

<script src="http://ci.angularjs.org/job/angular.js-misko/lastSuccessfulBuild/artifact/build/pkg/0.10.7-6b268598/angular-0.10.7-6b268598.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div ng-app="tab-demo">
  <h1> Tabs </h1>
    
  <div ng-controller="Ctrl">
    <ul class="nav nav-tabs">
      <li><a href="#home2">Home</a></li>
      <li ng-repeat="person in people">
        <a href="#repeat" ng-click="selectPerson(person)">{{person.name}}</a>
      </li>
      <li><a href="#settings2">Settings</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="home2">First page...</div>
      <div class="tab-pane" id="repeat">
        Hello: {{ person.name }}
      </div>
      <div class="tab-pane" id="settings2">Last page...</div>
    </div>
      
      
    <hr/>
    <div ng-repeat="person in people">
      <input ng-model="person.name">
      <a href ng-click="removePerson(person)">X</a>
    </div>
    <div>
      <a href ng-click="addPerson()">add</a>
    </div>
  </div>
</div>

JavaScript

angular.module('tab-demo', [])
  .directive('navTabs', function() {
    return function(scope, element, attrs) {
      var tabs = element.find('li');
      var selectedTab = tabs.filter('.active');
      if (!selectedTab.length) {
        selectedTab = tabs.filter(':first');
        selectedTab.addClass('active');
      }
      var selectedPane = $(selectedTab.find('a').attr('href'));
      selectedPane.addClass('active');

      element.bind('click', function(event) {
        selectedTab.removeClass('active');
        selectedPane.removeClass('active');
        selectedTab = angular.element(event.target).parent();
        selectedPane = $(selectedTab.find('a').attr('href'));
        selectedTab.addClass('active');
        selectedPane.addClass('active');
        event.preventDefault();
      });
    }
  });


function Ctrl($scope) {
    $scope.people = [
        {name: 'misko'},
        {name: 'igor'},
        {name: 'vojta'}
    ];
    
    $scope.selectPerson = function(person) {
        $scope.person = person;
    };
    
    $scope.removePerson = function(person) {
        for(var people=$scope.people, i=0, ii=people.length; i<ii; i++) {
            if (people[i] == person) {
                people.splice(i, 1);
                return;
            }
        }
    };
        
    $scope.addPerson = function() {
        $scope.people.push({name:'...'});
    }
}