UI-Utils for AngularJS
Αρκετα χρησιμα θα φανουν τα UI-Utils σε οσους χρησιμοποιουν το AngularJs framework. Προκειτε για μια μικρη βιβλιοθηκη που εχει βοηθηματα για τα apps που φτιαχνουμε οπως ‘Highlight’, ‘Show/hide’, ‘Event Binder’ κλπ. Μαλιστα αυτοχαρακτηριζονται ως Swiss-Army-Knife και δεν εχουν αδικο. Αναλυτικα με το τι περιλαμβανει αυτη η βιβλιοθηκη μπορειτε να διαβασετε εδω. Ενα μικρο παραδειγμα του πως μπορει να χρησιμοποιηθει πχ το Unique βλεπετε παρακατω:
Html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Unique Results</title>
</head>
<body>
<section id="unique" ng-controller="UniqueCtrl">
<h1>Unique</h1>
<select ng-model="attribute">
<option value="">-- No Filter --</option>
<option>firstName</option>
<option>lastName</option>
<option>id</option>
<option>gender</option>
</select>
<ul ng-repeat="item in items | unique: attribute">
<li>{{item.firstName }} {{item.lastName }}</li>
</ul>
<pre>{{items | unique:attribute | json}}</pre>
</section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="unique.js"></script>
<script src="ctrl.js"></script>
</html>
Και ο controller:
var myApp = angular.module('myApp',['ui.unique']);
myApp.controller ('UniqueCtrl', function ($scope) {
$scope.items = [
{ firstName: 'Dean', lastName: 'Sofer', id: 1, gender: 'Male' },
{ firstName: 'Dean', lastName: 'Kuntz', id: 2, gender: 'Male' },
{ firstName: 'Peter', lastName: 'Piper', id: 3, gender: 'Female' },
{ firstName: 'Peter', lastName: 'Darwin', id: 4, gender: 'Male' },
{ firstName: 'Janet', lastName: 'Piper', id: 5, gender: 'Female' },
{ firstName: 'Dan', lastName: 'Doyon', id: 6, gender: 'Male' },
{ firstName: 'Andy', lastName: 'Joslin', id: 1, gender: 'Male' },
];
});