Menu Dinamico Rails + AngularJS
Hola muy buenas noches estoy queriendo armar una echoping pero los menus no los are yo de forma estatica sino que estos se generaran en la parte administrativa estos menus pueden ser de uno dos o hasta tres niveles la cuestion es la parte de recibirlo con angularjs e interpretarlo que se generen los submenus correspondientes, el menu ya lo tengo aqui pego un demo del menu
El Json que recibo es
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">A long sub menu</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li>
<li class="disabled"><a class="disabled" href="#">Disabled item</a></li>
<li><a href="#">One more link</a></li>
<li><a href="#">Menu item 1</a></li>
</ul>
</li>
<li><a href="#">Another link</a></li>
<li><a href="#">One more link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
El menu lo genere con una sola tabla pero genere una tabla virtual usando la misma tabla y con el campo menu_id como clave foranea dentro de la misma tabla
-- Table: menus
-- DROP TABLE menus;
CREATE TABLE menus
(
id serial NOT NULL,
nombremenu character varying(255),
categoria_id integer,
descripcion text,
imagenmenu character varying(255),
created_at timestamp without time zone,
updated_at timestamp without time zone,
submenu_id integer,
posicion character varying(255),
status boolean DEFAULT true,
primario boolean DEFAULT false,
CONSTRAINT menus_pkey PRIMARY KEY (id)
)
WITH (
OIDS=FALSE
);
ALTER TABLE menus
OWNER TO postgres;
Para la parte de angular lo puse de la siguiente manera
(function() {
var app = angular.module('myApp', []);
//Los modulos para app opcionales 'angucomplete', 'ngSanitize', 'ng-rails-csrf'
app.service('Myservicio', function($http) {
this.getMenus = function(success, failure){
$http.get("/principal/menusuperior.json")
.success(success)
.error(failure);
};
});
app.controller('principal', ['$scope','Myservicio', '$http', function($scope, Myservicio, $http) {
$scope.holamundo = 'Hola mundo';
$scope.menusoptenidos = [];
$scope.menus = function()
{
tjGeeks.Myservicio(function(data) {
console.log(data);
angular.forEach(data, function(value)
{
$scope.menusoptenidos.push({
id: value.id,
nombremenu: value.nombremenu,
submenu_id: value.submenu_id,
status: value.status,
primario: value.primario
});
});
});
};
}]);
})();
El Json que recibo es
[
{
"id":2,
"nombremenu":"Wow",
"categoria_id":2,
"descripcion":"Todo lo que tenga que ver con wow",
"imagenmenu":{
"url":"/uploads/menu/imagenmenu/2/mc.png"
},
"created_at":"2015-01-05T21:22:14.091-08:00",
"updated_at":"2015-01-05T21:22:14.091-08:00",
"menu_id":null,
"posicion":null,
"status":true,
"primario":false
},
{
"id":1,
"nombremenu":"Magic",
"categoria_id":null,
"descripcion":"cscas",
"imagenmenu":{
"url":"/uploads/menu/imagenmenu/1/wow_wod2.png"
},
"created_at":"2015-01-05T19:54:53.688-08:00",
"updated_at":"2015-01-20T21:30:12.863-08:00",
"menu_id":null,
"posicion":null,
"status":true,
"primario":true
},
{
"id":3,
"nombremenu":"Cajas",
"categoria_id":null,
"descripcion":"Todas las cajas",
"imagenmenu":{
"url":null
},
"created_at":"2015-01-20T21:03:25.669-08:00",
"updated_at":"2015-01-20T21:30:23.621-08:00",
"menu_id":1,
"posicion":null,
"status":true,
"primario":false
}
]
Espero me puedan ayudar gracias.
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.