Skip to content

Commit 0ea3cfb

Browse files
ashoo-jindalashoo-jindal
authored
AngularJS directives and filters (ServiceNowDevProgram#872)
* Create readme.md Description of widget. * Update readme.md * Update readme.md * Update readme.md * Create html.html * Create css.css * Create client_script.js * Create server_script.js
1 parent 62f449b commit 0ea3cfb

File tree

5 files changed

+170
-0
lines changed

5 files changed

+170
-0
lines changed

‎Service Portal Widgets/AngularJS Directives and Filters/client_script.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
api.controller=function($scope, spModal ) {
2+
/* widget controller */
3+
var c = this;
4+
5+
// Variables from client script
6+
$scope.myText = "Type in textbox.";
7+
$scope.htmlText = "<p><b>AnglurJS:</b> Directives and Filters"
8+
$scope.startIndex = 0;
9+
$scope.myFilter = "";
10+
11+
//On-Click Function
12+
$scope.myButton = function(){
13+
spModal.alert("Run a function on Click");
14+
}
15+
16+
//Function on Enter Press
17+
$scope.myKey = function() {
18+
spModal.alert("Run a function on Enter Key");
19+
}
20+
21+
};

‎Service Portal Widgets/AngularJS Directives and Filters/css.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
h4 {
2+
font-weight: bolder;
3+
margin-top: 30px;
4+
color: green;
5+
}
6+
7+
.mydata {
8+
font-weight: bolder;
9+
color: blue;
10+
}

‎Service Portal Widgets/AngularJS Directives and Filters/html.html

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<div id="" style="overflow:scroll; height:400px;">
2+
<!-- your widget template -->
3+
<h4>Data</h4>
4+
<p class="mydata">
5+
<b>record:</b>{{data.record}}</p>
6+
<p class="mydata">
7+
<b>record1:</b>{{data.record1}}</p><br>
8+
9+
<h4>NG-CLICK</h4>
10+
<p>Run Function on Click</p>
11+
<button ng-click="myButton()">Click me!!!</button>
12+
13+
<h4>NG-MODEL</h4>
14+
<p>2-Way data variable</p>
15+
<b>myText:</b> {{myText}}<br>
16+
<input type="text" ng-model="myText"><br>
17+
18+
<h4>NG-KEYUP</h4>
19+
<p>Use Enter to Run Function</p>
20+
<input type="text" placeholder="Press Enter key here" ng-keyup="$event.keyCode == 13 ? myKey() : null"/><br><br>
21+
22+
<h4>NG-REPEAT</h4>
23+
<p>Looping through data</p>
24+
<p ng-repeat="x in data.record">{{x}} - Index {{$index}}</p><br>
25+
26+
<h4>NG-IF</h4>
27+
<p>Show only where condition in passed<br>
28+
Other Variables are not available</p>
29+
<p ng-repeat="x in data.record" ng-if="x == 3">{{x}}</p>
30+
31+
32+
<h4>NG-SHOW</h4>
33+
<p>Show only where condition in passed<br>
34+
Other Variables are available but hidden</p>
35+
<p ng-repeat="x in data.record" ng-show="x == 3">{{x}}</p>
36+
37+
38+
<h4>NG-HIDE</h4>
39+
<p>Hide where condition in passed<br>
40+
Variable is available but hidden</p>
41+
<p ng-repeat="x in data.record" ng-hide="x == 3">{{x}}</p>
42+
43+
44+
<h4>NG-BIND</h4>
45+
TEXT-BINDING
46+
<p ng-bind="mytext"></p><br>
47+
48+
<h4>NG-BIND-HTML</h4>
49+
<p>BIND with HTML Formatting</p>
50+
<p ng-bind-html="htmlText"></p>
51+
52+
53+
<h4>$INDEX</h4>
54+
<p ng-repeat="x in data.record">{{x}} - Index {{$index}}</p>
55+
56+
<h4>$INDEX IN IF CONDITION</h4>
57+
<p ng-repeat="x in data.record" ng-if="$index == 3">{{x}} - Index {{$index}}</p>
58+
59+
<h4>$EVEN</h4>
60+
<p ng-repeat="x in data.record" ng-if="$even">{{x}} - Index {{$index}}</p>
61+
62+
<h4>$ODD</h4>
63+
<p ng-repeat="x in data.record" ng-if="$odd">{{x}} - Index {{$index}}</p>
64+
65+
<h4>$FIRST</h4>
66+
<p ng-repeat="x in data.record" ng-if="$first">{{x}} - Index {{$index}}</p>
67+
68+
<h4>$LAST</h4>
69+
<p ng-repeat="x in data.record" ng-if="$last">{{x}} - Index {{$index}}</p>
70+
71+
<h4>$MIDDLE</h4>
72+
Leave 1st and Last
73+
<p ng-repeat="x in data.record" ng-if="$middle">{{x}} - Index {{$index}}</p>
74+
75+
<h4>LIMIT TO</h4>
76+
<p ng-repeat="x in data.record | limitTo:3">{{x}} - Index {{$index}}</p>
77+
78+
<h4>LIMIT TO BEGIN</h4>
79+
Start Index:<input type="number" ng-model="startIndex"> <br>
80+
<p ng-repeat="x in data.record | limitTo:3:startIndex">{{x}} - Index {{$index}}</p>
81+
82+
<h4>UPPERCASE</h4>
83+
{{data.record1}}<br>
84+
<p ng-repeat="x in data.record1">{{x | uppercase}} - Index {{$index}}</p>
85+
86+
<h4>lowercase</h4>
87+
<p ng-repeat="x in data.record1">{{x | lowercase}} - Index {{$index}}</p>
88+
89+
<h4>ORDER BY</h4>
90+
<p ng-repeat="x in data.record1 | orderBy:x">{{x}} - Index {{$index}}</p>
91+
92+
<h4>ORDER BY DESCENDING</h4>
93+
<p ng-repeat="x in data.record1 | orderBy:x:true">{{x}} - Index {{$index}}</p>
94+
95+
96+
<h4>FILTER</h4>
97+
Filter:<input type="text" placeholder="Enter filter here" ng-model="myFilter">
98+
<p ng-repeat="x in data.record1 | filter:myFilter">{{x}} - Index {{$index}}</p>
99+
100+
101+
</div>

‎Service Portal Widgets/AngularJS Directives and Filters/readme.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<h2>AngularJS Directives and Filters</h2>
2+
___
3+
This widget demonstrates useful AngularJS Directives and Filters.
4+
5+
<h3>Usage:</h3>
6+
1. Create a new widget.<br>
7+
2. Copy the respective code as mentioned by file names.
8+
9+
<h3>Following are covered in this:</h3>
10+
1. ng-click<br>
11+
2. ng-model<br>
12+
3. ng-keyup<br>
13+
4. ng-repeat<br>
14+
5. ng-if<br>
15+
6. ng-show<br>
16+
7. ng-hide<br>
17+
8. ng-bind<br>
18+
9. ng-bind-html<br>
19+
10. $index<br>
20+
11. $even<br>
21+
12. $odd<br>
22+
13. $first<br>
23+
14. $last<br>
24+
15. $middle<br>
25+
16. limitTo<br>
26+
17. uppercase<br>
27+
18. lowercase<br>
28+
19. orderBy<br>
29+
20. filter

‎Service Portal Widgets/AngularJS Directives and Filters/server_script.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
(function() {
2+
/* populate the 'data' object */
3+
/* e.g., data.table = $sp.getValue('table'); */
4+
5+
//Variables from Server Script
6+
data.record = [1,2,3,4,5,6];
7+
data.record1 = ["abc","xyz","Abc","Xyz","ABC","XYZ"];
8+
9+
})();

0 commit comments

Comments
 (0)