Show details on click

Using ng-show and ng-click

by Craig Jensen

HTML

<script src="https://code.angularjs.org/1.3.10/angular.js"></script>
<div ng-app="notificationsApp">
    <div ng-controller="NotificationListCtrl">
        <div>
            Notifications
        </div>
        <div id="notifications">
            <div ng-if="notifications.length == 0">
                No Notifications
            </div>
            <ul ng-if="notifications.length > 0" ng-repeat="notification in notifications">
                <a ng-if="notification.summary_item == false" ng-href="#here" ng-click="showNotificationDetail(notification.id)">
                    <li id="primary">{{notification.primary_line}}</li>
                    <li id="secondary">{{notification.secondary_line}}</li>
                </a>
                <a ng-if="notification.summary_item == true" href="{{notification.summary_url}}" id="{{notification.id}}">
                    <li id="primary">{{notification.primary_line}}</li>
                </a>
                <div class="notification_hidden" id="{{notification.id}}">
                    <div class="inline-block">
                        <div class="inline" id="primary_line">
                            {{notification.primary_line}}
                        </div>
                        <div class="inline" style="float: right">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAAH1JREFUKFN1kEsKwCAMRL3/4Vzorq2fiJsW75A6UkVTFB46SYYkqlJuTslzPWpHzzfh/cExXi0gQTyEsz6/YoCANEDPsZEAMPSWuKV5KQYxOrZWV5Orcs0tAhA5NkYz0X/pRaBtHwOm7RhyGSCX3hZ2ZoPKmcY/7sD8pTz8AhpjX7xHPMGHAAAAAElFTkSuQmCC" alt="Close"/>
                        </div>
                    </div>  
                    <div id="message_container">
                        {{notification.message}}
                    </div>
                    <div class="submit">
                        <div class="inline" ng-repeat="action in...

CSS

body {
    background-color: #F8F6ED
}
ul
{
    margin-top: 0;
    margin-bottom: 2px;
    padding: 0;
}
li
{
    font-family: Georgia;
    background-color: #EFE7D5;
    list-style: none;
    margin-left: 0px;
}
a
{    
    text-decoration: none;
}
#primary
{
    padding: 1% 2% 0 2%;
    font-size: 18px;
    color: #978778;
}
#secondary
{
    padding: 0 2% 1% 2%;
    font-size: 14px;
    color: #5B4F48;
}

div.notification_hidden {
    display: none;
}

.inline {
    display: inline-block;
    vertical-align: middle;
}

.submit {
    margin-left: auto;
    margin-right; auto;
    text-align: right;    
}

button.notification_button {
   width: 85px; 
   height: 30px;
}

button.action_button {
    background-color: #cf6b28;
    border: 0 none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-weight: bold; 
    padding: 6px 15px;
}

button.modify-button {
    background-color: #978778;
    color: #fff;
    cursor: pointer;
    border: 0 none;
    border-radius: 4px;
    font-weight: bold;
    padding: 6px; 15px;
}

JavaScript

var notificaitonsApp = angular.module('notificationsApp', []);
var notificationListCtrl = notificaitonsApp.controller('NotificationListCtrl', [
        '$scope', '$http',
        function($scope, $http) {

            $scope.notifications = getNotifications();
            
            function getNotifications() {
                var Data = [{
                    "id": "1",
                    "primary_line": "Missing Timesheet Entry",
                    "secondary_line": "Jan 28th",
                    "summary_item": false,
                    "message": "A notification description. Do something here. Blah, blah, blah",         
                    "actions": [{
                        "type": "Navigation",
                        "url": "http://somedomain.cm/app/234",
                        "url_text": "Update"
                        },{
                        "type": "Post",
                        "url": "http://somedomain.com/app/api/v1/234",
                        "url_text": "Approve"
                        }]
                },{
                    "id": "2",
                    "primary_line": "Purchase Reqest Approval Needed",
                    "secondary_line": "Account 333445, Requested by James",
                    "summary_item": false,
                    "message": "A different notification message. Take action now.",
                    "actions": [{
                        "type": "Navigation",
                        "url": "http://somedomain.com/pr/requisitions/434",
                        "url_text": "Edit"
                    },{
                        "type": "Post",
                        "url": "http://somedomain.com/pr/api/v1/requisitions/434",
                        "url_text": "Approve"
                    }]
                }, {
                    "id": "3",
                    "primary_line": "Multiple Items Need Your Attention",
                    "secondary_line": "",
                    "summary_item": true,
      ...