CRUD с угловой JS и JQuery Mobile

Question

CRUD с угловой JS и JQuery Mobile

0

Я пытаюсь сделать приложение CRUD с угловыми JS и jquery мобильными, но у меня есть некоторые проблемы с коллапсами, информация правильно получена угловыми js, но я не могу развернуть складчатые элементы.

Я применил директиву, чтобы сделать коллективное обновление

Ошибка, которую я получаю, следующая: https://gyazo.com/c35800051e3cdd6d9200a9955c382558

Я оставляю здесь код: index.html

<!DOCTYPE html>
<html >
<head>
    <title>Probando jQuery Mobile</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="logica.js"></script>      

</head>
<body ng-app="miapp" ng-controller="controlador">
     <!-- Pagina Lista de Prodcuctos --> 
    <section data-role="page" id="pag_lista_productos">
        <header data-role="header" data-theme="b">
            <h1>Lista de productos</h1>
        </header>
        <article data-role="content" class="ui-content" data-theme="c">
            <div align="right" data-type="horizontal" data-role="controlgroup" data-theme="c" data-mini='true'>
                <a href="#edit_product" data-role="button" data-icon="plus" data-iconpos="right"></a>
            </div>
            <div data-role="collapsibleset" data-theme="b" data-content-theme="a" id="sitio_lista">
                <div data-role='collapsible' data-theme='e' data-content-theme='e' ng-repeat="elemento in lista_productos" actualiza-lista>
                    <h3>{{elemento.nombre}}</h3>
                    <form>
                        <label for='tipo' >Tipo:</label><input type='text' id='tipo' value='{{elemento.tipo}}' disabled>
                        <label for='categoria'>Categoria::</label><input type='text' id='categoria' value='{{elemento.categoria}}' disabled>
                        <label for='udm'>UDM:</label><input type='text' id='udm' value='elemento.udm' disabled>
                        <label for='p_compra'>Precio Venta:</label><input type='text' id='p_venta' value='{{elemento.p_venta}}' disabled>
                        <label for='p_compra'>Precio Compra:</label><input type='text' id='p_compra' value='{{elemento.p_compra}}' disabled>
                        <a href='#edit_product' data-role='button' data-theme='d' ind_mod="+index+" class='button_mod'>Modificar</a>
                        <a href='#aviso_borrar' data-role='button' data-theme='d' ind_del="+index+" class='button_del'>Eliminar</a>
                    </form>
                </div>
            </div>
        </article>
    </section>

</body>
</html>

logica.js → файл с угловыми js

//creacion del modulo mi_app
var app = angular.module('miapp',[]);
app.controller('controlador',function($scope){
    $scope.lista_productos = [];        //Array con la lista de productos
    //Constructora del objeto producto
    $scope.Producto = function (nombre, tipo, consumible, categoria, udm, p_venta, p_compra, m_coste, pos_comp, pos_vent){
        this.nombre = nombre;
        this.tipo = tipo;
        this.consumible = consumible;
        this.categoria = categoria;
        this.udm = udm;
        this.p_venta = p_venta;
        this.p_compra = p_compra;
        this.m_coste = m_coste;
        this.pos_comp = pos_comp;
        this.pos_vent = pos_vent;
    };
    //Creación e inserción de los productos
    $scope.producto1 = new $scope.Producto("cartulina", "papel", true, "categoria1", "Unidades", 2.50, 1, "Fijo", true, false);    
    $scope.producto2 = new $scope.Producto("boligraf bic", "papel", true, "categoria1", "Unidades", 2.50, 1, "Fijo", true, false);
    $scope.producto3 = new $scope.Producto("grapadora", "papel", true, "categoria1", "Unidades", 2.50, 1, "Fijo", true, false);
    $scope.lista_productos.push($scope.producto1);  
    $scope.lista_productos.push($scope.producto2);
    $scope.lista_productos.push($scope.producto3); 

});

app.directive("actualizaLista", function() {
    return function(scope) {
        if (scope.$last){
            $('#sitio_lista').collapsibleset('refresh');
            //$('#sitio_lista').trigger('create').collapsibleset('refresh');
        }
    };
});

заранее спасибо

strok_777 10 нояб. 2015, в 14:42

Источник

1

Пожалуйста, используйте фрагмент инструмента.
Ele 10 нояб. 2015, в 13:18

Теги:

html

angularjs

jquery-mobile

1 ответ

Ещё вопросы

Пожалуйста, используйте фрагмент инструмента.

Marios Fakiolas · Answer 1 · 2015-11-10T13-00-00.000Z

Попробуй это:

$('#sitio_lista').collapsible().trigger( "create" );

для jQuery mobile 1.3.2

Я пробовал это, но это не работает.