Created
December 1, 2016 13:58
-
-
Save devigor/9be3c53974dab393f08596e407d4bf0f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html data-ng-app="BeMEAN"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Curso de AngularJS - Webschool.io</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"> | |
| <style> | |
| .wrapper { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .animate { | |
| transition: all linear 0.5s; | |
| } | |
| .ng-hide { | |
| height: 0; | |
| } | |
| .item.ng-enter { | |
| -webkit-transition: all linear 0.5s; | |
| transition: all linear 0.5s; | |
| } | |
| .item.ng-leave { | |
| -webkit-transition: all linear 0.5s; | |
| transition: all linear 0.5s; | |
| } | |
| .item.ng-enter { | |
| opacity: 0; | |
| } | |
| .item.ng-leave { | |
| opacity: 1; | |
| height: 100px; | |
| } | |
| .item.ng-enter.ng-enter-active { | |
| color: red; | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| opacity: 1; | |
| } | |
| .item.ng-leave.ng-leave-active { | |
| opacity: 0; | |
| height: 0; | |
| } | |
| .item.ng-move { | |
| -webkit-transition: all linear 1s; | |
| transition: all linear 1s; | |
| } | |
| .item.ng-move { | |
| opacity: 0; | |
| } | |
| .item.ng-move.ng-move-active { | |
| opacity: 1s; | |
| } | |
| .atom-titulo { | |
| color: #3F51B5; | |
| font-size: 80px; | |
| text-align: center; | |
| } | |
| .bold { | |
| font-weight: bold; | |
| } | |
| .strike { | |
| text-decoration: line-through; | |
| } | |
| </style> | |
| </head> | |
| <body data-ng-controller="UserController as User"> | |
| <div class="row wrapper"> | |
| <h2 data-ng-class="User.tituloStyle">{{ User.tituloU }}</h2> | |
| <p class="col s12"> | |
| <input type="text" placeholder="Nome" data-ng-model="User.form.name"> | |
| <input type="email" placeholder="Email" data-ng-model="User.form.email"> | |
| </p> | |
| <button data-ng-click="User.add(User.form)" class="btn btn-large green animate waves-effect waves-light col s12" type="submit" name="action">Adicionar</button> | |
| <button data-ng-if="User.editing" data-ng-click="User.save(User.form)" class="btn btn-large blue waves-effect waves-light col s12" type="submit" name="action">Salvar</button> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th colspan="4"> | |
| <label> | |
| <input type="text" placeholder="Buscar" data-ng-model="searchUser"> | |
| </label> | |
| </th> | |
| </tr> | |
| <tr> | |
| <th></th> | |
| <th>Nome</th> | |
| <th>Email</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| </table> | |
| <table> | |
| <tbody> | |
| <tr data-ng-class="{bold: !user.selecionado, strike: user.selecionado}" class="item" data-ng-repeat="user in User.users | orderBy:User.predicate |filter:searchUser"> | |
| <td> | |
| <input type="checkbox" id="user-${{$index}}" data-ng-model="user.selecionado"> | |
| <label for="user-${{$index}}"></label> | |
| </td> | |
| <td>{{ user.name }}</td> | |
| <td>{{ user.email }}</td> | |
| <td> | |
| <button data-ng-click="User.edit(user, $index)" class="btn animate btn-large blue waves-effect waves-light col s12" type="submit" name="action">Edit</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <button data-ng-click="User.orderByName()" class="btn btn-large black waves-effect waves-light col s12" type="submit" name="action">Ordenar por Nome</button> | |
| <button data-ng-click="User.orderByEmail()" class="btn btn-large black waves-effect waves-light col s12" type="submit" name="action">Ordenar por Email</button> | |
| <button data-ng-click="User.remove(User.users)" class="btn btn-large red waves-effect waves-light col s12" type="submit" name="action">Deletar</button> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-animate.js"></script> | |
| <script> | |
| angular.module("BeMEAN", ['ngAnimate']) | |
| .controller("UserController", UserController); | |
| function UserController() { | |
| var vm = this; | |
| vm.editing = false; | |
| vm.tituloU = "BeMEAN - Usuários"; | |
| vm.users = [ | |
| {name: 'Igor', email: 'devigor.tere@gmail.com'} | |
| , {name: 'Goku', email: 'oieusougoku@goku.com'} | |
| , {name: 'Elliot', email: 'elliot@mrrobot.com'} | |
| ]; | |
| vm.tituloStyle = "atom-titulo"; | |
| function getKeyLength() { | |
| return Object.keys(angular.copy(vm.users[0])).length; | |
| } | |
| vm.keysLenght = getKeyLength(); | |
| vm.orderByName = orderByName; | |
| function orderByName() { | |
| vm.predicate = 'name'; | |
| } | |
| vm.orderByEmail = orderByEmail; | |
| function orderByEmail() { | |
| vm.predicate = 'email'; | |
| } | |
| vm.add = add; | |
| function add(user) { | |
| vm.users.push(angular.copy(user)); | |
| vm.form = {}; | |
| } | |
| vm.remove = remove; | |
| function remove(users) { | |
| vm.users = users.filter(function(el) { return !el.selecionado }); | |
| } | |
| vm.edit = edit; | |
| function edit(user, index) { | |
| vm.form = angular.copy(user); | |
| vm.form.index = index; | |
| vm.editing = true; | |
| } | |
| vm.save = save; | |
| function save(user) { | |
| var users = vm.users.map(function(el, i) { | |
| if(i === user.index) { | |
| delete user.index; | |
| return user; | |
| } | |
| console.log(users); | |
| return el; | |
| }); | |
| vm.users = users; | |
| vm.editing = false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment