Angular Open UI

Angular Open UI is an open source project that provides a collection of UI components for AngularJS projects.

UI Components

• Dynamic Input - Input fields for various data types, and validation services
• Notification - Notification system

Dynamic Input

Supported Data Types

• Int - number
• Decimal - number
• String - text
• Boolean - checkbox
• DateTime - bootstrap/datepicker/timepicker
• Date - bootstrap/datepicker
• Time - bootstrap/timepicker
• Guid - text
• Uri - text
• TimeSpan - text
• Char - text
• Byte - number
• SByte - number
• Short - number
• UShort - number
• Long - number
• UInt - number
• ULong - number
• Double - number

Installation

Requirements

• AngularJS 1.5.x or above
• UI Bootstrap 1.3.x or above
• MomentJS 2.12.x or above

Install with NPM

$ npm install angular-open-ui

Install with Bower

$ bower install angular-open-ui

Usage

Include angular-open-ui.js file to your page.

with npm:

<script src="node_modules/angular-open-ui/dist/angular-open-ui.js"></script>

with bower:

<script src="bower_components/angular-open-ui/dist/angular-open-ui.js"></script>

Inject angular-open-ui module to your angular app:

angular.module('my-app', ['ui.bootstrap', 'openui.dynamicInput'])

Basic usage with the dynamic-input directive. Below will create a textbox that only accept integer

<dynamic-input data-input-type="Int" data-name="value" data-model="value"></dynamic-input>

Demo

There is an example created with angular-open-ui in this package.