Untitled

<!DOCTYPE html>
<html>

<head>
    <title>Angular</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link rel="stylesheet" href="style.css" />
    <meta charset="utf-8">
</head>


<body ng-app="miApp">

    <div class="title">
        <label>Directiva ng-filter</label>
    </div>

    <div class="content" ng-controller="tableController">


        <div class="form" >
        <form ng-submit="submit()" name="formu">
            <label>Usuario</label><br>
            <input type="text" name="useri" ng-model="user" placeholder="Usuario" required><br>
            <label class="warning" ng-show="!formu.useri.$pristine && formu.useri.$error.required">The user is required</label><br><br>

            <label>Perfil</label><br>
            <select ng-model="profiles.selected" ng-options="options.profile for options in profiles.options track by options.id">
                <!-- OPTIONS -->
            </select><br><br><br>

            <label>Contraseña</label><br>
            <input type="password" name="pass" ng-model="pass" placeholder="Contraseña" required/><br>
            <label class="warning" ng-show="!formu.pass.$pristine && formu.pass.$error.required">The password is required</label><br><br>


            <label>Confirme contraseña</label><br>
            <input type="password" name="passConfirm" ng-model="passConfirmation" placeholder="Contraseña" required data-password-verify="pass"><br>
            <label class="warning" ng-show="!formu.passConfirm.$pristine && formu.passConfirm.$error.required">The password is required</label><br>
            <label class="warning" ng-show="valida()">Diferent passwords</label><br>

            <input type="submit" ng-disabled="formu.$invalid || valida()" value="Guardar">
        </form>
        </div><!--


        --><div class="table" >

            <label>Usuarios</label><br><br>
            <table class="tableData">
                <thead>
                    <tr>
                        <td><input size="6" ng-model="buscar.clave" type="text" placeholder="Clave"></td>
                        <td><input ng-model="buscar.user" type="text" placeholder="Usuario"></td>
                        <td colspan="3" class="tede">Acciones</td>

                    </tr>
                    <tr>
                        <td>Clave</td>
                        <td>Usuario</td>
                        <td width="18%">Perfil</td>
                        <td width="18%" class="tede">Editar</td>
                        <td width="18%" class="tede">Borrar</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="user in users | filter: buscar:strict">
                        <td>{{ user.clave }}</td>
                        <td>{{ user.user}}</td>
                        <td>{{ user.profile}}</td>
                        <td class="tede"><button ng-Click="edit($index, user.profile)">Editar</button></td>
                        <td class="tede"><button ng-Click="delete($index)">Borrar</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
</body>

</html>

var app = angular.module('miApp',[]);


    app.controller('tableController', function($scope)
    {

        var OPC = -1;


        $scope.profiles =
        {
            options: [
                { id: '1', profile: "Dios"},
                { id: '2', profile: "Mortal"},
                ],
            selected: {id:'1', profile: "Dios"}
        };

        $scope.users = [
        {clave:'1', user:'Adrian', profile:'Dios', pass:'adri', confPass:'adri'},
        {clave:'2', user:'González', profile:'Mortal', pass:'go', confPass:'go'},
        {clave:'3', user:'Ceja', profile:'Mortal', pass:'ce', confPass:'ce'},
        {clave:'4', user:'Maytro', profile:'Dios', pass:'ma', confPass:'ma'},
        ];

        $scope.IDS = $scope.users.length + 1;

        console.log("ID siguiente:" + $scope.IDS);

        $scope.submit = function()
        {
            if (OPC < 0)
            {
                $scope.users.push({clave:$scope.IDS, user:this.user, profile: this.profiles.selected.profile, pass:this.pass, confPass: this.passConfirmation});
                clear_form();
                $scope.IDS += 1;
                console.log("ID siguiente:" + $scope.IDS);
            }
            else
            {
                $scope.users[OPC].user = $scope.user;
                $scope.users[OPC].profile = $scope.profiles.selected.profile;
                $scope.users[OPC].pass = $scope.pass;
                $scope.users[OPC].confPass = $scope.passConfirmation;
                clear_form();
                OPC = -1;
            }
        }

        function clear_form()
        {
            $scope.user = "";
            $scope.pass = "";
            $scope.passConfirmation = "";
            $scope.profiles.selected = $scope.profiles.options[0];
        }


        $scope.delete = function(index)
        {
            $scope.users.splice(index,1);
        }

        $scope.edit = function(index, perfil)
        {
            $scope.user = $scope.users[index].user;
            if (perfil == "Dios")
                $scope.profiles.selected = $scope.profiles.options[0];
            else
                $scope.profiles.selected = $scope.profiles.options[1];
            $scope.pass = $scope.users[index].pass;
            $scope.passConfirmation = $scope.users[index].confPass;
            OPC = index;
        }

        $scope.valida = function()
        {
            if ($scope.pass != $scope.passConfirmation || $scope.passConfirmation != $scope.pass)
                return true;
            else
                return false;
        }

    });


app.directive("passwordVerify", function()
{
    return {
        require: "ngModel",
        scope: {
            passwordVerify: '='
        },
        link: function(scope, element, attrs, ctrl)
        {
            scope.$watch(function()
            {
                var combined;
                if (scope.passwordVerify || ctrl.$viewValue)
                {
                    combined = scope.passwordVerify + '_' + ctrl.$viewValue;
                }
                return combined;

            },
            function(value)
            {
                if (value)
                {
                    ctrl.$parsers.unshift(function(viewValue)
                    {
                        var origin = scope.passwordVerify;
                        if (origin !== viewValue)
                        {
                            ctrl.$setValidity("passwordVerify", false);
                            return undefined;
                        }
                        else
                        {
                            ctrl.$setValidity("passwordVerify", true);
                            return viewValue;
                        }
                    });
                }
            });
        }
    };
});

input,select {
    width: 200px;
    margin-bottom: 10px;
    height: 27px;
    font-size: 13px;
}

button {
    width: 100px;
    height: 36px;
    margin: 10px;
    font-size: 14px;
}
table, th , td {
  border: 1px solid black ;
  border-collapse: collapse;
  padding: 5px;
  text-align: center;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1 ;
}
table tr:nth-child(even) {
  background-color: #ffffff ;
}
form span {
    color: red ;
    font-style: italic;
}
.controles:hover {
    cursor: pointer;
}

.controles.ed:hover {
    color: blue !important;
}
.controles.el:hover {
    color: red !important;
}
.tabla_usuarios {
    margin-top: 32px;
}
.tabla_usuarios table{
    margin-top: 10px;
}
form {
    margin-top: 20px;
}
.title {
    font-size: 30px;
}