Dynamic UI with AngularJS attributes

Developer
Robert Lowe
Size
5,934 Kb
Views
46,552
  1. Dynamic UI with AngularJS attributes Previews
  2. Dynamic UI with AngularJS attributes HTML Codes
  3. Dynamic UI with AngularJS attributes CSS Codes
  4. Dynamic UI with AngularJS attributes JS Codes

How do I make an dynamic ui with angularjs attributes?

An example of a single Angular directive with different behaviors based on what attribute values are set.. What is a dynamic ui with angularjs attributes? How do you make a dynamic ui with angularjs attributes? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

Dynamic UI with AngularJS attributes Previews
IQ Test

Dynamic UI with AngularJS attributes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic UI with AngularJS attributes</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/hint.css/1.3.5/hint.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app-container" ng-app="angularPageApp"> <div class="page-container"> <h2>Dynamic UI behavior with AngularJS attributes</h2> <h3>type="row" start="open"</h3> <div class="swirl-container"></div> <link-list-widget type="row" start="open" ng-controller="linkListWidgetCtrl"></link-list-widget> <div class="divider-bottom"></div> <div class="flex"> <div class="half-width"> <h3>type="column" start="close"</h3> <link-list-widget type="column" start="close" ng-controller="linkListWidgetCtrl"></link-list-widget> </div> <div class="divider-right"></div> <div class="half-width"> <h3>type="accordion" start="open"</h3> <div class="accordion-container flex-center"> <link-list-widget type="accordion" start="open" ng-controller="linkListWidgetCtrl"></link-list-widget> </div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic UI with AngularJS attributes - Script Codes CSS Codes

*, *::before, *::after { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0;
}
.flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;
}
.flex-center { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch;
}
.flex-column { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: stretch;
}
.flex-column-center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: center;
}
.flex-column-center-center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center;
}
h2, h3 { color: white; text-align: center; padding-top: 1em; margin: 0;
}
.page-container { position: relative; background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/swirl_pattern.png); z-index: 1; border: 0.5em solid white;
}
.page-container .swirl-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #5C18BC; z-index: -1; opacity: 0.7;
}
.page-container .half-width { width: 49%;
}
.divider-bottom { border-bottom: 0.5em solid white; opacity: 1;
}
.divider-right { border-right: 0.5em solid white;
}
.content-container { font-size: 0.8em;
}
.content-container .content { margin: 1em;
}
.content-container .content .item { background-color: white; box-shadow: 0 0.2em 0.5em 0 rgba(0, 0, 0, 0.26); margin: 1em; width: 27em;
}
.content-container .content .item.accordion { margin-top: 0; margin-bottom: 0;
}
.content-container .content .item:not(.open) { height: 7em;
}
.content-container .content .item.open header:hover i:last-child { transform: rotate(-90deg);
}
.content-container .content .item header { position: relative; padding: 2.5em 1em 2.5em 1em; text-align: center; border-bottom: 0.1em solid rgba(0, 0, 0, 0.16); color: grey; transition: background-color 0.2s linear; cursor: pointer;
}
.content-container .content .item header i { font-size: 2em; position: absolute; font-weight: bold;
}
.content-container .content .item header i:first-child { color: #5C18BC; left: 1em;
}
.content-container .content .item header i:last-child { color: #5C18BC; right: 1em; width: 1.1em; height: 1.1em; padding-left: 0.1em; transition: all 0.2s ease-in;
}
.content-container .content .item header span { cursor: default; font-size: 1.4em; line-height: 1.6em;
}
.content-container .content .item header:hover { box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.26); background-color: #332C7C;
}
.content-container .content .item header:hover i:first-child { color: white;
}
.content-container .content .item header:hover i:last-child { background-color: white; color: #5C18BC; transform: rotate(90deg); border-radius: 50%; box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.7);
}
.content-container .content .item header:hover span { color: white;
}
.content-container .content .item section { padding: 1em; background-color: white;
}
.content-container .content .item section .title { font-weight: bold; margin-bottom: 1em;
}
.content-container .content .item section .links .link { color: #5C18BC; margin-bottom: 0.5em; cursor: pointer; transition: all 0.1s ease-in;
}
.content-container .content .item section .links .link:hover { margin-left: 1em; font-weight: bold;
}

Dynamic UI with AngularJS attributes - Script Codes JS Codes

var PageApp = angular.module('angularPageApp', ['ngSanitize']);
PageApp.controller('linkListWidgetCtrl', function($scope) { // define defaults for the directive behavior in case none are // provided as html attributes (see directive link function below) $scope.type = 'row'; $scope.start = 'open'; // content a some ui direction taken from the Google Accounts page (https://myaccount.google.com/) $scope.items = [ { header: { text: 'Sign-in & security', css: 'fa-lock', open: true }, content: { title: 'Control your password and account-access settings', links: ['Signing in to Google', 'Device activity and notifications', 'Connected apps & sites'] } }, { header: { text: 'Personal info and privacy', css: 'fa-user', open: true }, content: { title: 'Manage your visibility settings and the data we use to personalize your experience.', links: ['Your personal info', 'Activity control', 'Ads settings', 'Account overview', 'Control your content'] } }, { header: { text: 'Account preferences', css: 'fa-cog', open: true }, content: { title: 'Set language, accessibility, and other settings that help you use Google.', links: ['Language & Input Tools', 'Accessibility', 'Your Google Drive storage', 'Delete your account or services'] } } ]; // called once from directive link function if the type is set to 'accordion' $scope.initAccordion = function() { $scope.closeAll(); if ($scope.start === 'open') { $scope.items[0].header.open = true; } }; // set the header.open boolean to false for all items // angular should update the ui for us $scope.closeAll = function() { for(var i = 0; i < $scope.items.length; i++) { $scope.items[i].header.open = false; } }; // in none-accordion cases all this does is flip the open boolean for // the clicked header. if our type is accordion and we're opening a // currently closed item, we close all items before opening the clicked one $scope.headerClick = function(header) { if ($scope.type === 'accordion' && header.open === false) { $scope.closeAll(); } header.open = !header.open; };
});
PageApp.directive('linkListWidget', function($timeout) { return { restrict: 'E', template: [ '<div class="content-container">', '<div class="content" ng-class="{\'flex-center\': type === \'row\', \'flex-column-center\': type === \'column\'}">', '<div class="item" ng-repeat="item in items" ng-class="{open: item.header.open === true, accordion: type === \'accordion\'}">', '<header ng-click="headerClick(item.header)">', '<i class="fa {{ item.header.css }}"></i>', '<span>{{ item.header.text }}</span>', '<i class="fa fa-angle-right"></i>', '</header>', '<section ng-show="item.header.open === true">', '<div class="title">{{ item.content.title }}</div>', '<div class="links">', '<div class="link" ng-repeat="link in item.content.links" >{{ link }}</div>', '</div>', '</section>', '</div>', '</div>', '</div>' ].join(''), link: function(scope, element, attrs) { // feed any attributes defined in the html into our controller's scope if (attrs.type) { scope.type = attrs.type; } if (attrs.start) { scope.start = attrs.start; } if (scope.start === 'close') { scope.closeAll(); } if (scope.type === 'accordion') { scope.initAccordion(); } } };
});
Dynamic UI with AngularJS attributes - Script Codes
Dynamic UI with AngularJS attributes - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 23, 2022
Rating 4.5
Size 5,934 Kb
Views 46,552
Do you need developer help for Dynamic UI with AngularJS attributes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Lowe (rlo206) Script Codes
Name
Whirlpool Spinner with 4 sizes
Editable Table Concept
Interactive data table with Angular and SCSS
Testing Semantic UI Grid
Exploring ngForm
CSS Color Wheel Loaders
Semantic Element Document Outline
A Pen by Robert Lowe
The Rainball
Learning to style range inputs
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!