AngularJS – modello esterno

Sto facendo un modello per ogni contenuto di e perché ho molti dati da mostrare ma tutti nella stessa struttura.

Qui l’index.html

qui lo script.js:

 function Ctrl($scope) { $scope.methods = [ { name: 'method1', description: 'bla bla bla', benefits: 'benefits of method1', bestPractices : 'bestPractices', example: 'example'}, { name: 'method2', description: 'bla bla bla', benefits: 'benefits of method2', bestPractices : 'bestPractices', example: 'example'} ]; } 

e qui il templateMethod.html:

 

Funziona! Ma: se faccio clic sul primo pulsante e poi sul secondo, il contenuto del primo pulsante non scompare, appare sotto il contenuto del primo pulsante … Problema con la ripetizione?

Grazie

Ogni elemento di una ng-repeat ha il proprio ambito, ereditato dall’ambito esterno (controller).

È necessario memorizzare l’object da mostrare in un object dell’ambito del controller. Ad esempio: methods

 
...

Fondamentalmente quello che ha detto JB Nizet, ecco un plunker funzionante. Il problema è che ng-include e ng-repeat creano i propri scopi. Gli ambiti figlio hanno accesso in sola lettura alle proprietà del rispettivo genitore, pertanto è necessario un riferimento a un object aggiuntivo per ottenere sia l’accesso in lettura che in scrittura tra gli ambiti.

Javascript:

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.state = { toShow: false }; $scope.methods = [{ name: 'method1', description: 'bla bla bla', benefits: 'benefits of method1', bestPractices: 'bestPractices', example: 'example' }, { name: 'method2', description: 'bla bla bla', benefits: 'benefits of method2', bestPractices: 'bestPractices', example: 'example' } ]; }); 

HTML:

     AngularJS Plunker        

Il problema è in realtà legato al fatto che per ogni ng-repeat Angular crea un nuovo scope, quindi è necessario avere qualcosa in un ambito genitore, cioè: un Controller in cui è ansible utilizzare per fare riferimento allo stato visibile di ciascun metodo, qualcosa come Questo:

http://jsfiddle.net/strokov/FEgK3/1/

Fondamentalmente ho impostato ng-show su una proprietà dell’object metodo:

  

E sul metodo click, chiamo una funzione sull’ambito Scope chiamata show (metodo) che si occuperà di impostare la proprietà method.show su tutti i metodi, quindi in pratica siamo nascosti tutti e quindi mostriamo quello cliccato in questo modo:

 $scope.show = function(method) { angular.forEach($scope.methods, function(method){ method.show = 0; }); method.show = 1; }; 

Noterai che con questo stile css puoi vedere ogni diverso ambito angular rappresentato nell’HTML:

.ng-scope {border: 1px tratteggiato in rosso; margine: 5px; }