Foro

Menu Dinamico Rails + AngularJS

0
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



      <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.














0
Por la respuesta que recibes tienes que construir el arbol, te recomiendo hacerlo en el servicio, luego crea una directiva que reciba el arbol y genere el menu basado en la información que recibe.

Saludos
obelich: me dejaste igual :P un ejemplo ? 25/01/2015

¿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.