angularify / angular-semantic-ui Goto Github PK
View Code? Open in Web Editor NEW[WiP] AngularJS native directives for Semantic UI
Home Page: http://angularify.github.io/angular-semantic-ui
License: MIT License
angular-semantic-ui's People
Contributors
Stargazers
Watchers
Forkers
papepapes jketcham nkabir unprofound tom-coefficient tomneyland odysseyofmayhem andrea-vega zishe solcates dmetzler jmoren curts mcontagious babyfatdragon wgallios huangxinyue psyton foysalit motopia dyxushuai evangellion ramana4029 bahaaldine riskyferyansyah franksoong jspdown friendfinder-inc evandavid frankt117 xblaster kevspadillo kuangyunsheng dimpu mahadeer rex toni-petrovic kurmaev asmshaon mackjoner edyonil honomoa tuvaergun phamcong dszczyt penging doreentseng cataquil hijourney nishant8bits rtsys2020 steveb-p yesmeck madjukesinc sijmenvos emotivhq pkdevbox omer72 onepill thanhtungdp zavarzind erratik vidding somesky riczat falexandre tobiastheil openandrus churchdesk cloudxtreme imnitinnayar7 wuzhitian joeclacks terrencechengthc tympanix manuelramirezio geofmureithi-zz waldir04 dystudio chethandc2014 vtpp2014 tanmoythander 284247028 winsx dandanknight hhy5277 emillejrangular-semantic-ui's Issues
Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 0-0 [#] in expression
you should replace with
'Illegal use of ngTransclude directive' when using checkbox
Hi,
When I use <checkbox ng-model="checkboxModel"></checkbox>, there is a error:
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element:
Wish you could help me to solve this problem.Thank you.
Error when moving from one angular-ui-state to another
TypeError: undefined is not a function
at angular-semantic-ui.js:280
at Scope.$get.Scope.$broadcast (angular.js:14785)
at Scope.$get.Scope.$destroy (angular.js:14405)
at Scope.ng.config.$provide.decorator.$delegate.proto.$destroy (:812:29)
at cleanupLastView (angular-ui-router.js:3816)
at angular-ui-router.js:3849
at publicLinkFn (angular.js:6995)
at updateView (angular-ui-router.js:3839)
at angular-ui-router.js:3801
at Scope.$get.Scope.$broadcast (angular.js:14785)
angular-semantic-ui.js:280 is:
scope.$on('$destroy', function(event) {
this.remove_accordion(scope);
});my sample form is
<div ui-view>
<form class="ui form">
<h3 class="ui dividing header">Personal Information</h3>
<div class="two fields">
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="last-name" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<dropdown title="my dropdown" ng-model="dropdown_model">
<dropdown-group>item1</dropdown-group>
<dropdown-group>item2</dropdown-group>
<dropdown-group>item3</dropdown-group>
<dropdown-group>item4</dropdown-group>
</dropdown>
</div>
</div>
<div class="two fields">
<div class="field">
<label>State</label>
<select class="ui search dropdown" id="state">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="field"></div>
</div>
<div class="field">
<label>Biography</label>
<textarea></textarea>
</div>
<h4 class="ui dividing header">Account Info</h4>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<h4 class="ui top attached header">Import Settings</h4>
<div class="ui bottom attached segment">
<div class="grouped inline fields">
<div class="field">
<input type="radio" name="sex" value="male" checked><label>Male</label>
</div>
<div class="field">
<input type="radio" name="sex" value="female"><label>Female</label>
</div>
</div>
</div>
<h4 class="ui dividing header">Settings</h4>
<h5 class="ui header">Privacy</h5>
<div class="field">
<checkbox checked="false" ng-model="privacy" type="toggle">Allow <b>anyone</b> to see my account</checkbox>
</div>
<div class="field">
<checkbox checked="false" ng-model="privacy2" type="toggle">Allow <b>only friends</b> to see my account</checkbox>
</div>
<h5 class="ui header">Newsletter Subscriptions</h5>
<div class="field">
<checkbox checked="false" ng-model="aa" type="slider">Top Posts This Week</checkbox>
</div>
<div class="field">
<checkbox checked="false" ng-model="bb" type="slider">Hot deals</checkbox>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<checkbox checked="false" ng-model="cc" type="standard">I agree to the <a href="#">Terms of Service</a></checkbox>
</div>
<div class="ui error message">
<div class="header">We noticed some issues</div>
</div>
<div class="ui submit button">Register</div>
</form>
</div>app.js
angular.module('hattApp', [
'ngAnimate', 'ngResource', 'ui.router',
'myApp.controllers',
'myApp.projects',
'myApp.dashboard',
'angularify.semantic'
]);
angular.module('hattApp').run(function($state, $rootScope) {
$state.go('dashboard');
});
**index.html**
```html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<title>Web</title>
<!-- build:css app/built/app.min.css -->
<link rel="stylesheet" type="text/css" href="/app/assets/css/app.css" />
<link rel="stylesheet" type="text/css" href="/bower_components/semantic-ui/dist/semantic.css" />
<!-- endbuild -->
</head>
<body ng-controller="LayoutController">
<!--top navigation start-->
<div class="ui secondary pointing menu">
<a class="item"
ng-repeat="category in categories"
ui-sref="{{category.url}}"
ng-class="{'active': isCurrentTopLevelCategory(category)}"><i ng-if="category.icon!=null" class="{{category.icon}}"></i>{{category.title}}</a>
<div class="right menu">
<div class="item">
<div class="ui transparent icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item">Logout</a>
</div>
</div>
<!--top navigation finish-->
<div class="ui grid">
<div class="row">
<div class="two wide column" ng-show="showSideNav">
<div ui-view="sidenav"></div>
</div>
<div class="ten wide column">
<div ui-view="content"></div>
</div>
</div>
</div>
<!-- build:js app/built/app.min.js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/sweetalert/lib/sweet-alert.js"></script>
<script src="/bower_components/semantic-ui/dist/semantic.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-semantic-ui/dist/angular-semantic-ui.js"></script>
<script src="/app/app.js"></script>
<script src="/app/js/controllers/layout.js"></script>
<script src="/app/features/projects/projectModule.js"></script>
<script src="/app/features/dashboard/dashboardModule.js"></script>
<script src="/app/features/dashboard/js/controllers/dashboard-sidenav-controller.js"></script>
<script src="/app/features/projects/js/controllers/projects-controller.js"></script>
<script src="/app/features/projects/js/controllers/projects-sidenav-controller.js"></script>
<!-- endbuild -->
</body>
</html>so when I'm opening the page with the form - all is good. When I'm navigating away from the form by clicking any button in top navigation block (which sets a new state in angular ui router) - I'm getting such error.
I have Latest angular.js 1.3.15
{
"name": "web",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-messages": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0",
"angular-ui-router": "latest",
"sweetalert": "latest",
"semantic-ui": "latest",
"underscore": "latest",
"angular-semantic-ui": "latest"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "hatt"
}dropmenu has no animation
下拉菜单狠好用， 但是却缺少动画。
diretive:dropmenu works well, but has no animation when operate it.
Support for basic modal
Need support for the 'basic' modal
How capture dropdown change events?
Hi guys,
I was unable to capture ng-change event for a dropdown using this framework.
I read the source code and noticed that the templates only uses div's. How do you handle to fire onChange/ngChange events for a selectbox?
Am I missing something?
Thanky you.
Wizard: Active property should only depend on step.selected
The wizard template has the following property: active: step.selected && !step.completed. The problem with depending on step.completed is that when you are in a second step and click the title of the first step, you go to the correct tab but the header does not reflect this.
If we remove the step.completed check from the active property and leave it like active: step.selected, the wizard header is always active when a step is selected.
Dropdown ignores key presses
It seems that the dropdown ignores key presses for quickly scrolling to an item. It kinda makes it hard to navigate long lists (like lists of countries)
Dimmer set model to false not working
The dimmer is still display after set loading_dimmer to false;
controller:
.controller('DimmerCtrl', ['$scope', function($scope){
$scope.call_dimmer = function(){
console.log('show dimmer');
$scope.loading_dimmer = true;
setTimeout(function(){
console.log('hide dimmer');
$scope.loading_dimmer = false;
}, 2000);
}
}]);
html:
<page-dimmer class="ui page dimmer" ng-model="loading_dimmer" show="false"><div class="ui large text loader">Loading</div></page-dimmer>
<div ng-click="call_dimmer()"></div>
Can't find variable accordion
Can't find variable accordion at src/accordion/accordion.js : 3
Animations
Hello,
On the Semanic UI site, the modal for example zooms and fades in:
http://semantic-ui.com/modules/modal.html
On the angular example, the modal just appears instantly:
http://angularify.github.io/angular-semantic-ui/templates/modal.html
Is there anyway to animate this?
Cheers
Modal not shown from ngclick
passing modal as true does not show when a button is clicked when using ngClick unless it is left in the controller
How to close the Sidebar upon select of a menu item?
Thanks for this cool project! How can I make the sidebar close when the user selects an option in the menu?
Can a modal have a background image?
I tried to put background image to the modal but it doesnt work,
any idea?
<modal ng-model="dc.show_leaderboard" class="leaderBoard">
<i class="close icon" ng-click="dc.close_modal()"></i>
<div class="header" >
Leader Board 123
</div>
</modal>
.leaderBoard{
background: url('/assets/images/0011mainBG_SmallRobotBG_overlay1364x768.png') no-repeat !important;
width: 200px;
left: 90%;
text-align: center;
/*background: #485655 !important;*/
color: white;
}
checkbox disable feature not available in 0.0.3
Hi,
When i install through bower i am getting 0.0.3 version of the source and checkbox disable option is missing. Can you please tell me which version i have to take?
thanks
Karthik
Why not contribute / port to official Semantic Org Angular project?
Hey.
I see that Semantic Org are working on official project for Angular support.
https://github.com/Semantic-Org/Semantic-UI-Angular
Did this repo come first or something? I would like to contribute but seems to make sense to contribute to official project. Although looks like more progress has been made here.
Is there any reason for the two separate efforts? Could they be merged?
Dropdown key,value support
I'm trying to populate the dropdown from an array of objects. I need the value to be the object ID and the title the object label. How do I achieve this?
Anyone know why angular related project prefer to use grunt?
I noticed that official semantic is using gulp for building tools, why angular version are using grunt, any special reason?
Option to disable a checkbox
Like the Title says there should be a Option to disable the Checkbox.
In the Documentation of Semant UI it looks like: disabled="disabled"
HTML5 Dialog
Just a note here that the modal directive might make use of HTML5 Dialog somehow.
https://github.com/GoogleChrome/dialog-polyfill
Not a feature request. Just a drive-by note. I'm just taking a look at your library. I think semantic-ui is really neat and I use angular, so I just found this through a quick search and it looks interesting so far.
Thanks!
Can a dropdown have the option 'Default' or 'Select...' or 'NoOptionSelected' ?
Can a dropdown have the option 'Default' or 'Select...' or 'NoOptionSelected' to select and then
set null to ngModel ?
[Accordion] close=all bug
Grunt tests fail
Sidebar's unit tests fail when using grunt test:
INFO [karma]: Karma server started at http://localhost:9018/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9 (Mac)]: Connected on socket id C4wBG5sPuAKLNZW4nUPy
PhantomJS 1.9 (Mac) sidebar controller add_sidebar_item SideBarController add_sidebar_item test FAILED
PhantomJS 1.9 (Mac) sidebar controller remove_side_bar_item SideBarController remove_side_bar test FAILED
PhantomJS 1.9 (Mac): Executed 12 of 12 (2 FAILED) (0.11 secs / 0.053 secs)
support angular 1.3?
the code seems can not work with angular 1.3. I'm working with angular-meteor which use 1.3 for default and semantic-ui 1.0. Would you like to update? Thank you very much.
Dropdown directive isn't working
I tried to use your dropdown directive but it doesn't work,when I click on it, nothing happen. I think it's doesn't work because the menu div need an other class to be opened: the hidden and visible classes.
Bower
make it installable via bower.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.