AngularJS Playground

Experimenting with AngularJS.

HTML

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>Names</h1>
    <ul cn-sortable="items" on-update="orderItems(itemUpdates)">
        <li ng-repeat="item in items">
            <input type="hidden" name="id" value="{{item.id}}" />
            {{item.name}} | <a href="#" ng-click="deleteItem($index)">(delete)</a>
        </li>
    </ul>
    <ul>
        <li>
            <form name="theForm" ng-submit="formSubmit()">
                <input name="myName" type="text" ng-model="newName" required />
                <input name="submit" type="submit" />
            </form>
        </li>
    </ul>
    
    <button name="reset" ng-click="initItems()">Reset All</button>
    
    <div id="debugText">
        Text in scope: {{debugText}} <br />
        Form in scope: {{formDebugText}}
    </div>
    
    <div class="chat-bubble right-side">
      <p>
        A very simple sample text message.
      </p>
      <span class="chat-bubble-user">User 123</span>
      <span class="chat-bubble-user time">Jan 11, 2019 4:22PM</span>
    </div>
</div>

CSS

#debugText {
    margin: 10px 0;
    padding: 5px;
    background-color: #eee;
    border: 1px solid #ccc;
}

input.ng-dirty.ng-invalid {
   background-color: #f65b90;
}

.chat-bubble {
  width: 80%;
  background-color: #00cf88;
  color: white;
  padding: 6px 12px;
  border-radius: 0 10px 10px 0;
}

.chat-bubble.right-side {
  background-color: #11bbcc;
  float: right;
  border-radius: 10px 0 0 10px;
  text-align: right;
}

.chat-bubble p {
  margin: 0
}

.chat-bubble-user {
  font-size: 0.7em;
  display: inline-block;
  margin-right: 10px;
}

.chat-bubble-user.time {
  margin-right: 0;
}

JavaScript

'use strict';

var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', 'filterFilter', 'orderByFilter', function($scope, filterFilter, orderByFilter) {
    $scope.initItems = function() {
        $scope.items = [
            {id: 1, name: 'Name 1', sort_order: 0},
            {id: 2, name: 'Name 2', sort_order: 1},
            {id: 3, name: 'Name 3', sort_order: 2}
        ];
    };
    
    $scope.initItems();
    
    $scope.formSubmit = function() {
        var newItem = {id: 0, name: $scope.newName, sort_order: $scope.items.length};
        $scope.items.push(newItem);
        $scope.newName = '';
        $scope.theForm.$setPristine();
    };
    
    $scope.orderItems = function(itemUpdates) {
        itemUpdates.forEach(function(i) {
            $scope.orderItem(i);
        });
        $scope.items = orderByFilter($scope.items, 'sort_order');
    };
    
    $scope.orderItem = function(itemUpdate) {        
        var itemToOrder = filterFilter($scope.items, {id: itemUpdate.id}).pop();
        itemToOrder.sort_order = itemUpdate.newSortOrder;
    };
    
    $scope.deleteItem = function(index) {
        $scope.items.splice(index, 1);
    };
        
    //debug
    $scope.$watch('items', function() {
        $scope.debugText = $scope.items;
    });
    
    $scope.$watch('theForm', function() {
        if($scope.theForm) { 
            $scope.formDebugText = 'Form in Scope';
        }
        else {
            $scope.formDebugText = 'Form is Undefined';
        }
    });
}]);

//trying to make a somewhat generic sorting directive
//user passes in a model array/collection
app.directive('cnSortable', function(filterFilter) {
    return {
        scope: {
            cnSortable: '=',
            onUpdate: '&'
        },
        compile: function(tElement, tAttrs) {
            //could use this if we needed to set up some common functionality for all instances. Since this is just a one-instance directive on my page right now, this...