JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<script src="http://code.angularjs.org/1.0.1/angular-resource-1.0.1.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!doctype html>
<html ng-app="Twitter">
<body>
<div ng-controller="TwitterCtrl">
    <form class="form-horizontal">
        <input type="text" ng-model="searchTerm">
        <button class="btn" ng-click="doSearch()"><i class="icon-search"></i>Search</button>
    </form>
    <table class="table" dg-click="click(tweet)">
        <tr ng-repeat="tweet in twitterResult.results">
            <td class="clicked-{{tweet.clicked}}">{{tweet.text}}</td>
        </tr>
    </table>
</div>
</body>
</html>

CSS

.clicked-true { background-color: #eef; };

JavaScript

// https://github.com/nishp1/angular-delegate-event

(function() {
    var dgEventDirectives = {};

    angular.forEach(
        'Click Dblclick Mousedown Mouseup Mouseover Mouseout Mousemove Mouseenter Mouseleave'.split(' '),
            function(name) {
                var directiveName = 'dg' + name;
                dgEventDirectives[directiveName] = ['$parse', function($parse) {
                    return function(scope, element, attrs) {
                        
                        var fn = $parse(attrs[directiveName]);
                        element.bind(name.toLowerCase(), function(evt) {
                            scope.$apply(function() {
                                fn(angular.element(evt.target).scope(), {$event:evt});
                            });
                        });
                    
                    };
                }];
        }
    );

    angular.module('DelegateEvent', []).directive(dgEventDirectives);
})();


var myApp = angular.module('Twitter', ['ngResource', 'DelegateEvent'])

function TwitterCtrl ($scope, $resource) {
    
    $scope.clickedTweet = null;  
    $scope.searchTerm = 'angularjs';

    $scope.twitter = $resource('http://search.twitter.com/:action',
        {action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
        {get:{method:'JSONP'}});
    
    $scope.doSearch = function() {
        $scope.twitterResult = $scope.twitter.get({q: $scope.searchTerm});
    };

    $scope.click = function(tweet) {
        $scope.clickedTweet = tweet;
        tweet.clicked = true;
        console.log(tweet);
        $scope.$apply();
    };
    
    $scope.doSearch();

}