у меня есть страница, которую я делаю с Bootstrap
и AngularJS
для front-end и я произвожу несколько accordions на той же странице динамического способа с одним ng-repeat
. Проблема состоит в том, что, когда я кликаю на именах tabs, чтобы расширять их, прячут титул tab и являются контентом... а именно, оно не функционирует, как он был бы должен, и у меня есть другой код, который равен, и если оно функционирует..., я не понимаю, потому что это поведение. Оставил html, который я использую и фильтр AngularJS (Угловой 1), который я использую из-за сомнений...
productos.html:
Tango Infinito - Productos
{{r.rubro | uppercase}}
{{t.tipo | uppercase}}
ProductosController.js:
(function(){
var module = angular.module("tangoInfinito");
var ProductosController = function($scope, ProductosService) {
function idAsignado(lista, producto) {
var listaLength = lista.length;
for (var i = 0; i < listaLength; i++) {
if (lista[i].producto === producto) {
return true;
}
}
return false;
};
var listaIdAccordions = [];
var accordionNumber = 1;
$scope.accordionId = function(prodNombre) {
if(!idAsignado(listaIdAccordions, prodNombre)) {
var accId = "accordion" + accordionNumber;
accordionNumber++;
listaIdAccordions.push({
producto: prodNombre,
id: accId
});
//console.log(listaIdAccordions);
//console.log("Nuevo id asignado");
return accId;
}
else {
var largo = listaIdAccordions.length;
for(var i = 0; i < largo; i++) {
if(listaIdAccordions[i].producto === prodNombre) {
//console.log(listaIdAccordions);
//console.log("Id devuelto");
return listaIdAccordions[i].id;
}
}
}
};
var armarLista = function($rubros, $tipos) {
var lista = [];
var rubrosTemp = $rubros.slice(0);
var tiposTemp = $tipos.slice(0);
for(var i = 0; i < rubrosTemp.length; i++) {
var rubro = rubrosTemp[i].rubro.toUpperCase();
lista.push( {descripcion: rubro, isHeader: true} );
for(var j = 0; j < tiposTemp.length; j++) {
if(tiposTemp[j].rubro === rubrosTemp[i].rubro) {
lista.push( {descripcion: tiposTemp[j].tipo, isHeader: false} );
}
}
}
return lista;
};
var getDatosFromService = function() {
ProductosService.getDatos().success(function(response) {
//Lista para armar el menu desplegable (menu productos) de la barra de navegación
//Esta lista es tomada por index.html y productos.html
//(en un script al final de la página) para armar el menu dinamicamente
$scope.navbarList = armarLista(response["rubros"], response["tipos"]);
$scope.productos = response["productos"];
$scope.rubros = response["rubros"];
$scope.tipos = response["tipos"];
});
}
getDatosFromService();
};
module.controller("ProductosController", ProductosController);
})();
IdFilter.js:
(function() {
var module = angular.module("tangoInfinito");
var IdFilter = function() {
return function(item) {
var id = "";
id = item.toLowerCase();
id = id.replace(/\s/g, "-");
return id;
};
};
module.filter("IdFilter", IdFilter);
})();
И поведение, о котором я говорю им:
Я ИЗДАЮ: я видел, что по какому-то разуму, когда я кликаю на каком-то титуле, в div, у которого есть класс panel-heading
добавляют класс collapse
, но нет in
, из-за которого свойство display
перейди к тому, чтобы быть none
, и также он присоединяется один style="height: 20px;"
, который я принимаю, должен будет быть через JavaScript
, так как сначала у элемента этого нет. Но я не могу приходить к заключению, откуда приходят эти изменения...
Ну, я нашел причину ошибки... Разум - рукописный шрифт, который я сделал в конце страницы, чтобы делать dropdown-list бруска навигации и чтобы помещать ему классы active in
первым tabs каждого заголовка, но оказывается, что он также добавляет классы active in
в div с классом panel-heading
способствуя тому, чтобы plugin вел себя ошибочной формы. Решение состояло в том, чтобы доставать классы active-in
в div с классом panel-heading
с методом removeClass
jQuery
. Я оставляю решение:
<script>
$(document).ready(function() {
//Tomo el nodo al que luego le agrego li según correspondan
//<li class="dropdown-header">Rubro</li> Para los rubros
//<li><a href="#tipo">Tipo</a></li>
var lista = $("ul.dropdown-menu");
var navbarProductosLista = undefined;
//Chequea hasta que la variable navbarList de ProductosController esta asignada
function checkVariable() {
//Toma la variable navbarList del scope de ProductosController
//para agregar la lista de manera dinámica
navbarProductosLista = angular.element($("[ng-controller=ProductosController]")).scope().navbarList;
if(navbarProductosLista != undefined) {
for(var i = 0; i < navbarProductosLista.length; i++) {
if(navbarProductosLista[i].isHeader === true) {
var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" + navbarProductosLista[i].descripcion + "</a></li>");
nodo.children().addClass("dropdown-header");
lista.append(nodo);
}
else {
var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" + navbarProductosLista[i].descripcion + "</a></li>");
lista.append(nodo);
}
}
clearInterval(id);
}
$("ul li:first-child")
.addClass("active");
//Esta es la linea que causa el error
$(".tab-content div:first-child")
.addClass("in active");
//Y esta es la linea que lo soluciona
$(".panel-heading")
.removeClass("in active");
};
var id = setInterval(checkVariable, 250);
});
</script>
Чтобы способствовать тому, чтобы div (в этом случае у tab) был единственный скрытый контент, они должны иметь что-то общим. Которое я имею в виду, дело в том, что, если у одного producto
есть integrantes
эти integrantes
, они должны иметь что-то общим с этим продуктом.
Верит в следующий пример:
$scope.productos = [
{
nombre: "Producto 1",
id: 1,
integrantes: [
{ nombre: "Integrante 1", edad: 17, correo: "ejemplo@ejemplo.cl" },
{ nombre: "Integrante 2", edad: 40, correo: "ejemplo@ejemplo.cl" },
{ nombre: "Integrante 3", edad: 22, correo: "ejemplo@ejemplo.cl" }
]
},
{ nombre: "Producto 2",
id: 2,
integrantes: [
{ nombre: "Integrante 4", edad: 20, correo: "ejemplo@ejemplo.cl" },
{ nombre: "Integrante 5", edad: 35, correo: "ejemplo@ejemplo.cl" },
{ nombre: "Integrante 6", edad: 60, correo: "ejemplo@ejemplo.cl" }
]
},
{ nombre: "Producto 3",
id: 3,
integrantes: [
{ nombre: "Integrante 7", edad: 80, correo: "ejemplo@ejemplo.cl" },
{ nombre: "Integrante 8", edad: 18, correo: "ejemplo@ejemplo.cl" },
{ nombre: "Integrante 9", edad: 45, correo: "ejemplo@ejemplo.cl" }
]
}];
, Поскольку ты можешь видеть, у каждого продукта есть Ваша договоренность членов.
Также верит одна funciГіn в вызов $scope.mostrarHijos
и первая $scope.isHijoShow
$scope.mostrarHijos = function(integrante) {
if ($scope.isHijosShow(integrante)) {
$scope.shownHijos = null;
} else {
$scope.shownHijos = integrante;
}
};
$scope.isHijosShow = function(integrante) {
return $scope.shownHijos === integrante;
};
год В визуальной части просто:
<div ng-repeat="producto in productos">
<h2>{{producto.nombre}}</h2>
<div ng-repeat="integrante in producto.integrantes" ng-click="mostrarHijos(integrante)">
<p>{{integrante.nombre}}</p>
<div ng-show="isHijosShow(integrante)" style="margin-left:40px;">
<p> Edad : {{integrante.edad}}</p>
<p> Correo : {{integrante.correo}}</p>
</div>
</div>
</div>
оставил Тебе codepen этого кода функционируя codepen
Bootstrap
или с AngularJS
, но хочу понять, потому что я не функционируют вещи... большое спасибо равно в течение времени
– Augusto Herbel
11.12.2016, 00:20