UI-Utils for AngularJS

admin

11 years ago

Αρκετα χρησιμα θα φανουν τα 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' },
    ];
  });