2
2
3
3
< head >
4
4
< title > Angular UIkit showcase</ title >
5
- < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css "/>
6
- < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/autocomplete.min.css "/>
7
- < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/form-select.min.css "/>
8
- < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/sortable.min.css "/>
9
- < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/form-advanced.min.css "/>
10
- < link rel ="stylesheet " href ="angular-uikit.min.css "/>
5
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css " />
6
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/autocomplete.min.css " />
7
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/form-select.min.css " />
8
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/sortable.min.css " />
9
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/form-advanced.min.css " />
10
+ < link rel ="stylesheet " href ="angular-uikit.min.css " />
11
11
12
12
< style >
13
13
.alert-class {
20
20
< body data-ng-controller ="MainController as vm ">
21
21
22
22
23
- < article class ="uk-article ">
24
- < h1 class ="uk-article-title "> Autocomplete</ h1 >
25
- < input data-uk-ng-autocomplete data-ng-model ="vm.selected " data-uk-on-select ="vm.autocompOnSelect($selectedItem) " data-uk-label ="'userId' " data-uk-source-path ="'https://jsonplaceholder.typicode.com/posts' ">
26
- < button class ="uk-button " data-ng-click ="vm.source = [{id:1, pippo:'test1'},{id:43, pippo:'asdasd'},{id:42, pippo:'asdasd'}]; "> Change source</ button >
27
- Selected item: {{vm.selected}}
23
+ < article class ="uk-article ">
24
+ < h1 class ="uk-article-title "> Autocomplete</ h1 >
25
+ < input data-uk-ng-autocomplete data-ng-model ="vm.selected " data-uk-on-select ="vm.autocompOnSelect($selectedItem) " data-uk-label ="'userId' "
26
+ data-uk-source-path ="'https://jsonplaceholder.typicode.com/posts' ">
27
+ < button class ="uk-button " data-ng-click ="vm.source = [{id:1, pippo:'test1'},{id:43, pippo:'asdasd'},{id:42, pippo:'asdasd'}]; "> Change source</ button >
28
+ Selected item: {{vm.selected}}
28
29
29
- </ article >
30
+ </ article >
30
31
31
- < article class ="uk-article ">
32
- < h1 class ="uk-article-title "> Calendar</ h1 >
33
- < uk-ng-calendar data-get-events-by-date ="vm.getEventsByDate($startDate, $endDate) " data-on-event-selected ="vm.onEventSelected($event) "> </ uk-ng-calendar >
34
- </ article >
32
+ < article class ="uk-article ">
33
+ < h1 class ="uk-article-title "> Calendar</ h1 >
34
+ < uk-ng-calendar data-get-events-by-date ="vm.getEventsByDate($startDate, $endDate) " data-on-event-selected ="vm.onEventSelected($event) "> </ uk-ng-calendar >
35
+ </ article >
35
36
36
- < article class ="uk-article ">
37
- < h1 class ="uk-article-title "> Sortable</ h1 >
38
- < div class ="uk-grid uk-grid-match uk-sortable " data-uk-ng-sortable ="{handleClass: 'uk-sortable-handle'} ">
39
- < div data-id ="{{$index}} " data-uk-ng-sortable-item ="p " data-ng-repeat ="p in vm.sortList | orderBy: 'order' " data-uk-grid-margin >
40
- < i data-ng-if ="!conf.readonly " class ="uk-icon-bars uk-text-success uk-sortable-handle "> </ i > Ciao
37
+ < article class ="uk-article ">
38
+ < h1 class ="uk-article-title "> Sortable</ h1 >
39
+ < div class ="uk-grid uk-grid-match uk-sortable " data-uk-ng-sortable ="{handleClass: 'uk-sortable-handle'} ">
40
+ < div data-id ="{{$index}} " data-uk-ng-sortable-item ="p " data-ng-repeat ="p in vm.sortList | orderBy: 'order' " data-uk-grid-margin >
41
+ < i data-ng-if ="!conf.readonly " class ="uk-icon-bars uk-text-success uk-sortable-handle "> </ i > Ciao
42
+ </ div >
41
43
</ div >
42
- </ div >
43
- </ article >
44
-
45
- < article class ="uk-article " >
46
- < h1 class =" uk-article-title " > JSON Table Form </ h1 >
47
- < uk-ng-json-table-form model =" vm.jsonTableModel " structure =" vm.structure " can-reorder =" true " submit-on-enter =" true " read-only =" true " > </ uk-ng-json-table-form >
48
- {{vm.jsonTableModel | json}}
49
- </ article >
50
-
51
- < script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js "> </ script >
52
- < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js "> </ script >
53
- < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.min.js "> </ script >
54
- < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/autocomplete.min.js "> </ script >
55
- < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/sortable.min.js "> </ script >
56
- < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/accordion.min.js "> </ script >
57
-
58
- < script src ="angular-uikit.min.js "> </ script >
59
- < script >
60
- angular . module ( 'angularUIkitShowcase' , [ 'angularUikit' ] )
44
+ </ article >
45
+
46
+ < article class =" uk-article " >
47
+ < h1 class ="uk-article-title " > JSON Table Form </ h1 >
48
+ < uk-ng-json-table-form model =" vm.jsonTableModel " structure =" vm.structure " can-reorder =" true " submit-on-enter =" true " read-only =" true " > </ uk-ng-json-table-form >
49
+
50
+ {{vm.jsonTableModel | json}}
51
+ </ article >
52
+
53
+ < script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js "> </ script >
54
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js "> </ script >
55
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.min.js "> </ script >
56
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/autocomplete.min.js "> </ script >
57
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/sortable.min.js "> </ script >
58
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/accordion.min.js "> </ script >
59
+
60
+ < script src ="angular-uikit.min.js "> </ script >
61
+ < script >
62
+ angular . module ( 'angularUIkitShowcase' , [ 'angularUikit' ] )
61
63
. controller ( 'MainController' , function ( $q , $timeout ) {
62
64
var vm = this ;
63
65
64
- vm . selected = { "userId" :2 , "id" :12 , "title" :"in quibusdam tempore odit est dolorem" , "body" :"itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio" } ;
66
+ vm . selected = { "userId" : 2 , "id" : 12 , "title" : "in quibusdam tempore odit est dolorem" , "body" : "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio" } ;
65
67
//vm.source = ['test1', 'test2', 'test3'];
66
68
67
- vm . source = [ { id :1 , pippo :'test1' } , { id :56 , pippo :'test2' } , { id :123 , pippo :'test3' } ] ;
69
+ vm . source = [ { id : 1 , pippo : 'test1' } , { id : 56 , pippo : 'test2' } , { id : 123 , pippo : 'test3' } ] ;
68
70
69
71
70
72
vm . sortList = [ {
@@ -95,8 +97,8 @@ <h1 class="uk-article-title">JSON Table Form</h1>
95
97
label : "Units"
96
98
} ,
97
99
priority : 1 ,
98
- processRecipeProducts :[
99
- { dosage : "asdas" }
100
+ processRecipeProducts : [
101
+ { dosage : "asdas" }
100
102
]
101
103
} , {
102
104
name : "ciao3" ,
@@ -115,21 +117,21 @@ <h1 class="uk-article-title">JSON Table Form</h1>
115
117
"label" : "Image" ,
116
118
"property" : "thumbnail" ,
117
119
"type" : "image" ,
118
- "image" :{
119
- "interpolate" :{
120
- "base" :"https://getuikit.com/v2/docs/images/placeholder_DIMENSIONE.svg" ,
121
- "value" :"DIMENSIONE"
120
+ "image" : {
121
+ "interpolate" : {
122
+ "base" : "https://getuikit.com/v2/docs/images/placeholder_DIMENSIONE.svg" ,
123
+ "value" : "DIMENSIONE"
122
124
} ,
123
- "maxWidth" :"100" ,
124
- "maxHeight" :"100"
125
+ "maxWidth" : "100" ,
126
+ "maxHeight" : "100"
125
127
}
126
128
} ,
127
129
{
128
130
"icon" : "sort-numeric-asc" ,
129
131
"label" : "sequence" ,
130
132
"property" : "sequence" ,
131
133
"type" : "sequence"
132
- } , {
134
+ } , {
133
135
"label" : "Name" ,
134
136
"property" : "name" ,
135
137
"type" : "text" ,
@@ -238,7 +240,7 @@ <h1 class="uk-article-title">JSON Table Form</h1>
238
240
} ;
239
241
240
242
} )
241
- </ script >
243
+ </ script >
242
244
243
245
244
246
</ body >
0 commit comments