Cómo obtener diferentes niveles de $index en ngRepeat profundamente anidado en angularJS
{
nombre: 'C desde el principio hasta el abandono',
autor: dreamapple',
Libro: [
{nombre: 'github'},
{nombre: 'google'},
{nombre: 'nodejs'},
{name: 'react'}
]
},
{
name: 'Java desde el principio hasta la ejecución ',
autor: 'eh da',
libros: [
{nombre: 'Sprite'},
{nombre : 'Pepsi'},
{nombre: 'Cóctel'}
]
}
];
El requisito actual es que necesito buclear el appData anterior
lt; {{item.name}}lt; span class="outer-index"gt; } }lt;/spangt;lt;/h3gt;
lt;h4gt;{{ item.author}}lt;/h4gt;
lt;li class="lista- grupo -item"gt;
lt;ul class="list-group"gt;
lt;li class="list-group-item" ng-repeat="v en item.books seguimiento por $index" ng-init="innerIndex = $index"gt;
{{v.name}} lt; span class="inner-index"gt; InnerIndex: { { internalIndex}}lt;/spangt;lt;button class="btn btn-danger" ng-click="vm.removeItem(outerIndex, internalIndex)"gt;Removelt;/buttongt;
lt ; /ligt;
lt;li class="list-group-item"gt;
lt;form class="form-inline"gt;
lt; input class="form-control" ng-model="vm.tempItem[$index]" type="text"gt;
lt botón class="btn btn-primary" ng - click="vm.addItem(outerIndex)" gt;Agregar un elementolt;/buttongt;
lt;/formgt;
lt;/ligt;
lt;/ulgt;
lt;/ligt;
lt;hr ng-show="! $last"gt;
lt;/ulgt;
Sección del controlador:<
/p>
removefunctionItem(outerIndex, internalIndex) {
vm.appData[outerIndex].books.splice(innerIndex, 1);
}
Podemos comenzar desde la función removeItem dentro del controlador
Esta función tiene dos parámetros, uno es el parámetro externalIndex
y el otro es el parámetro internalIndex
, donde externalIndex
representa el índice $index
del primer nivel del bucle, e internalIndex
representa el $index
índice del segundo nivel. Cada vez que se elimina un elemento, necesitamos saber qué elemento de qué objeto en el primer nivel del bucle se eliminó.
En la página, guardamos el $index de la primera capa del bucle a través de ng-init="outerIndex = $index"
y pasamos ng-init="innerIndex = $ index"
Guarda el $index del bucle de segundo nivel. Entonces todo lo que sigue es simple.
Si no entiendes bien lo que dije anteriormente, puedes intentar practicarlo tú mismo.
La siguiente es la parte del código fuente:
Parte HTML
lt;headgt;
lt;meta charset="UTF-8"gt;
lt;titlegt;1lt;/titlegt;
lt;link rel="stylesheet" href="/bootstrap/3.3.6/css/bootstrap.css"gt;
lt; enlace rel="stylesheet" href="./lib/jsonFormater/jsonFormater.css"gt;
lt; scriptrc="/jquery/2.0.0/jquery.js"gt ;lt ;/scriptgt;
lt;scriptrc="/bootstrap/3.3.6/js/bootstrap.js"gt;lt;/scriptgt;
lt;scriptrc=" ./ lib/jsonFormater/jsonFormater.js"gt;lt;/scriptgt;
lt;script src="./.../angular-1.4.5/angular.js"gt;lt; /scriptgt ;
lt;script src="app.js"gt;lt;/scriptgt;
lt;stylegt;
.outer-index {
p>
color: #FF0000;
color de fondo: #f8f8f8;
relleno: 3px;
borde -radio: 6px;
p>
}
.inner-index {
color: #00AA00
fondo; -color: #f8f8f8;
relleno: 3px;
radio-borde:
}
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt;div class="container-fluid" ng-controller="AppController como vm"gt ;
lt;div class ="row"gt
lt; div class="col-md-6"gt
lt; ="list-group" ng-repeat="elemento en vm.appData" ng-init="outerIndex = $index" gt;
lt; {{item.name}}lt; class="outer-index"gt; externalIndex: { {outerIndex}}lt;/spangt;lt;/h3gt;
lt;h4gt; {{item.author}}lt;/h4gt;
lt;li class="list-group-item"gt;
lt;ul class="list-group"gt;
lt; ="lista-elemento-grupo" ng-repeat= "v en
seguimiento de item.books por $index" ng-init="innerIndex = $index"gt;
{{v.name}} lt; span class="inner-index"gt; InnerIndex: {{ InnerIndex}}lt;/spangt;lt;button class="btn btn-danger" ng-click="vm.removeItem(outerIndex, InnerIndex)"gt;Removelt;/buttongt;
lt ;/ ligt;
lt;li class="list-group-item"gt;
lt;form class="form-inline"gt;
lt ; input class="form-control" ng-model="vm.tempItem[$index]" type="text"gt;
lt botón class="btn btn-primary" ng -click; ="vm.addItem(outerIndex)" gt;Agregar un elementolt;/buttongt;
lt;/formgt;
lt;/ligt;
lt ;/ulgt;
lt;/ligt;
lt;hr ng-show="! $último"gt;
lt;/ulgt;
lt;/divgt;
lt;div id="show-container" class="col -md-6"gt;
lt;h3gt;vm.appData:!
lt;h3gt;vm.appData:!/divgt;
lt ;/divgt;
lt;/bodygt;
Parte de JavaScript
(función() {
angular.module('aplicación ', [])
.controller('AppController', AppController);
AppController.
$inject = ['$scope'];
función AppController($scope) {
var vm = this;
//Inicializar datos originales
p>
var appData = [
{
nombre: 'C desde el principio hasta el abandono',
autor: dreamapple' ,
Libros: [
{name: 'github'},
{name: 'google'},
{name : 'nodejs'} ,
{nombre: 'react'}
]
},
{
nombre: 'Java desde el principio hasta la ejecución',
autor: huh da',
Libros: [
{nombre: 'Sprite'},
{nombre: 'Pepsi'},
{nombre: 'Cóctel'}
]
}
];
vm.appData = appData;
vm.tempItem = [];
vm.addItem = addItem;
vm.removeItem = removeItem;
config();
función addItem(outerIndex) {
if(vm.tempItem[ externalIndex]) {
vm.tempItem[...appData[outerIndex].books.push({
nombre: vm.tempItem[outerIndex]
});
vm .tempItem[outerIndex] = '';
vm.jf.doFormat(vm.appData);
}
else {
alert('¡El elemento agregado no puede ser nulo!')
}
}
función removeItem(outerIndex, internalIndex) {
vm.appData[outerIndex].books.split(innerIndex, 1);
vm.jf.doFormat(vm.appData);
vm.jf .doFormat(vm. appData)appData);
}
función config() {
var opciones = {
dom: '#jsoncontainer',
tabSize: 2,
quoteKeys: true,
imgCollapsed: "./lib/jsonFormater/images/collapsed.gif",
imgExpanded："./lib/jsonFormater/images/expanded.gif
",
isCollapsible: true
};
vm.jf = new JsonFormater(opciones);
vm.jf.doFormat (vm.appData);
}
}}
})();
vm.jf.