Ecco il mio problema.
struttura HTML:
<tr><td><a ng-click=aClick()>Click Me</a></td></tr>
Non posso avere alcun id/classe associata e
cosa ho bisogno è che su un semplice clic del 'Click Me', il <tr> viene nascosto. Ho bisogno di una soluzione jQuery. Alcuni come non sono in grado di utilizzare $(this).
FUNZIONE:
$scope.aClick = function() {
$(this).parent().parent().css('display','block');
};
Ma questa affermazione mi dà un errore.
Nota: I wouldn Si consiglia di utilizzare la manipolazione dom in un controller, è possibile scrivere una direttiva per farlo. Detto questo, è possibile utilizzare lo $event per ottenere l'oggetto evento, da cui è possibile ottenere il target dell'evento e utilizzarlo con jquery.
<tr><td><a ng-click="aClick($event)">Click Me</a></td></tr>
E
$scope.aClick = function(event) {
$(event.target).parent().parent().css('display','none');
};
Demo: Plunker
Aggiornamento
Una soluzione angolare più appropriata sarà è quello di utilizzare ng-nascondere
<tr ng-hide="hideRow"><td><a ng-click="hideRow = true">Click Me</a></td></tr>
D emo: Plunker
Updated demo con ng-repeat
FUNZIONA !! Grazie .. –
Questa è una soluzione al problema ma non è la soluzione giusta. Questa soluzione è strettamente associata alla struttura del tuo html. So che @Arun P Johny ti stava dando una soluzione per risolvere il tuo problema immediato, ma penso che dovrebbe astenersi dal farlo. È un disservizio per il resto degli sviluppatori (principalmente per il prossimo sviluppatore che lavorerà con questo codice!). – ganaraj
@ganaraj sì, come ho notato nella risposta, è solo per risolvere il problema che sta affrontando. –
Dal momento che si utilizza l'angolare, è molto raro che si debba eseguire la manipolazione dom effettiva. Invece, controlla la direttiva ng-hide/ng-show che dovrebbe farlo per te.
Un esempio dalla documentazione angolari:
<body>
Click me: <input type="checkbox" ng-model="checked"><br/>
Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <br/>
Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span>
</body>
Modifica
Se la variabile nell'espressione viene aggiornato in modo asincrono, è possibile forzare un aggiornamento con $scope.$apply
Come ho detto, ho bisogno di jquery per fare il mio lavoro. Il vincolo con ng-hide è che la variabile su cui è chiamato viene aggiornata in una funzione di callback e quindi, ng-hide non viene aggiornato. –
Quindi dovresti essere in grado di forzare un aggiornamento con ['$ sope. $ Apply'] (http://docs.angularjs.org/api/ng.$rootScope.Scope) – NilsH
Ill lo controllo definitivamente .. grazie –
È possibile utilizzare questo:
JavaScript
function TestCtrl($scope) {
$scope.clickMe = function ($event) {
$($event.target).parent().parent().css('display','none');
};
}
HTML
<div ng-app>
<div ng-controller="TestCtrl">
<a ng-click="clickMe($event)">Click me</a>
</div>
</div>
Definately works .... Ma Arun ha postato la risposta prima e questo è più preciso di quello di cui ho bisogno .. . quindi solo un +1. –
Sì, quella fiera :-) –
perché non fai qualcosa di semplice come questo? Presumo che tu faccia questo in loop ...
<div ng-repeat="row in table">
<tr>
<td>
<a ng-class="{'hideme': hiddenRows[row.id]}" ng-click="hiddenRows[row.id] = true">Click Me</a>
</td>
</tr>
</div>
o meglio ancora
<div ng-repeat="row in table">
<tr ng-show="!hiddenRows[row.id]">
<td>
<a ng-click="hiddenRows[row.id] = true">Click Me</a>
</td>
</tr>
</div>
(Non ho prove, ma dovrebbe dare un'idea)
Che errore hai trovato? –
dice che no .parent(). –
$ scope. $ Apply() fa miracoli per coloro che vorrebbero farlo in modo angolare. –