JSFiddle - React, Tailwind, and code Playground

by pkozlowski_opensource

HTML

<script src="http://code.angularjs.org/angular-resource-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/pkozlowski-opensource/angularjs-mongolab/master/mongolab.js"></script>
<div class="span4 well" ng-controller="MyCtrl">
    <!-- Tabs -->
    <ul class="nav nav-tabs">
        <li class="{{Tab1}}"><a href="" ng-click="myTab(1)">List View</a></li>
        <li class="{{Tab2}}"><a href="" ng-click="myTab(2)">Edit View</a></li>
    </ul>
    <!-- Tab Content -->
    <div class="tab-content">
        <!-- List View -->
        <div class="tab-pane {{Tab1}}">
            <p><a href="" ng-click="whereAmI(myUrl)">What's my URL?  </a>  <a href="" ng-click="openNew()"><i class="icon-plus-sign"></i></a></p>
            <input type="text" ng-model="search" class="search-query" placeholder="Search" style="height: 22px">
            <table>
                <thead>
                <p></p>
                </thead>
                <tbody>
                <tr ng-repeat="city in cities | filter:search | orderBy:'name'">
                    <td><a href="{{city.site}}" target="_blank">{{city.name}}</a></td>
                    <td>{{city.description}}</td>
                    <td><a href="" ng-click="getEdit(city._id.$oid)"><i class="icon-pencil"></i></a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- Edit View -->
        <div class="tab-pane {{Tab2}}">
            <form name="myForm">
                <div class="control-group" ng-class="{error: myForm.name.$invalid}">
                    <label>Name</label>
                    <input type="text" name="name" ng-model="city.name" required>
                    <span ng-show="myForm.name.$error.required" class="help-inline">Required</span>
                </div>
                <div class="control-group" ng-class="{error: myForm.site.$invalid}">
                   ...

JavaScript

var app = angular.module('main', ['mongolabResource']);
app.constant('API_KEY', '4fc34128e4b0401bdbfd18aa');
app.constant('DB_NAME', 'totai');
app.factory('City', function($mongolabResource) {
    return $mongolabResource('recursos');
});


app.controller('MyCtrl', function($scope, City) {

    $scope.Tab1 = 'active';
    $scope.Tab2 = '';
    $scope.cities = City.query();

    $scope.beforeEdit = function(city) {
        $scope.original = city;
        $scope.city = new City(city);
        $scope.myTab(2);
    }

    $scope.afterEdit = function() {
        $scope.cities = City.query();
        $scope.original = undefined;
        $scope.city = undefined;
        $scope.myTab(1);
    }

    $scope.myTab = function(arg) {
        $scope.Tab1 = (arg == 1) ? "active" : "";
        $scope.Tab2 = (arg == 2) ? "active" : "";
    }

    $scope.getEdit = function(id) {
        City.getById(id, function(city) {
            $scope.beforeEdit(city);
        });
    }

    $scope.save = function() {
        $scope.city.saveOrUpdate($scope.afterEdit, $scope.afterEdit);
    };

    $scope.destroy = function() {
        $scope.city.delete($scope.afterEdit);
    };

    $scope.openNew = function() {
        $scope.beforeEdit(new City());
    }

    $scope.isClean = function() {
        return angular.equals($scope.original, $scope.city);
    }
});