Ingreso de porcentaje y fracciones

Este ejemplo muestra un formulario (tipo modal) que permite ingresar valores en formatos de porcentaje, fracciones o decimales. estos valores pueden estar en el formato (15%, 2.3%, 1/3, 1 3/4, 23, 54,69)

by Miguel Roman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.min.css">
<div class="container" ng-controller="HerenciaController as vm">
    <h1>Demo porcentaje</h1>
    <p>Este ejemplo muestra un formulario (tipo modal) que permite ingresar valores en formatos de porcentaje, fracciones o decimales. estos valores pueden estar en el formato (<code>15%</code>, <code>2.3%</code>, <code>1/3</code>, <code>1 3/4</code>, <code>23</code>, <code>54.69</code>)</p>
    
    <div class="panel panel-default">
        <div class="panel-heading">Activo <button type="button" ng-click="vm.nuevoActivo()" class="btn btn-primary btn-xs pull-right"> <i class="glyphicon glyphicon-plus"></i> Nuevo</button></div>
        <div class="panel-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Correlativo</th>
                        <th>Codigo</th>
                        <th>Nombre</th>
                        <th>Valor</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in vm.activo">
                        <td>$index</td>
                        <td>{{item.codigo}}</td>
                        <td>{{item.nombre}}</td>
                        <td>{{item.valor}}</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="panel panel-default">
        <div class="panel-heading">Herederos <button type="button" ng-click="vm.nuevoHeredero()" class="btn btn-primary btn-xs pull-right"> <i class="glyphicon glyphicon-plus"></i> Nuevo</button></div>
        <div class="panel-body">
            <table class="table">
                <thead>
                    <tr>
         ...

CSS

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

JavaScript

angular
    .module('demo', ['ui.bootstrap'])
    .controller('HerenciaController', HerenciaController)
    .controller('NuevoActivoController', NuevoActivoController)
    .controller('NuevoHerederoController', NuevoHerederoController);

function HerenciaController($window, $modal) {
    var vm = this;
    
    vm.nuevoActivo = nuevoActivo;
    vm.nuevoHeredero = nuevoHeredero;
    
    function nuevoActivo() {
        var promesa = $modal.open({
          templateUrl: '/NuevoActivo.html',
          controller: 'NuevoActivoController as vm',
        }).result;
        
        console.log(promesa);
    }
    
    function nuevoHeredero() {
        $window.alert('heredero');
    }
}

function NuevoActivoController($scope) {
    var vm = this;
    
    vm.cancelar = cancelar;
    
    function cancelar() {
        $scope.$dismiss();
    }
}

function NuevoHerederoController() {
    
}