Holen Sie sich das $ This in angularjs

Hier ist mein Problem.

HTML-Struktur:

<tr><td><a ng-click=aClick()>Click Me</a></td></tr>

Ich kann keine id/Klasse mit dem und

zugeordnet haben

Was ich benötige, ist, dass auf dem Klick auf ‚Me Klicken Sie auf‘, die <tr> versteckt wird. Ich brauche eine jQuery-Lösung. Einige, wie ich $(this) nicht verwenden kann.

FUNKTION:

$scope.aClick = function() { 
    $(this).parent().parent().css('display','block'); 
};

Aber diese Aussage ist mir ein Fehler.

Quelle

2013-04-23 Bhumi Singhal

Welche Fehler Sie bekommen? –

heißt es, dass keine .parent(). –

$ scope. $ Apply() wirkt Wunder für diejenigen, die dies auf die eckige Weise tun möchten. –

: Ich wouldn Ich empfehle die Verwendung von Dom-Manipulation in einem Controller, Sie können eine Direktive dazu schreiben. Das heißt, Sie können das $event verwenden, um das Ereignisobjekt abzurufen, von dem Sie das Ereignisziel abrufen und es mit jquery verwenden können.

<tr><td><a ng-click="aClick($event)">Click Me</a></td></tr>

Und

$scope.aClick = function(event) { 
    $(event.target).parent().parent().css('display','none'); 
    };

Demo: Plunker

aktualisieren
Eine geeignete Winkel Lösung sein ng-hide

<tr ng-hide="hideRow"><td><a ng-click="hideRow = true">Click Me</a></td></tr>

D zu verwenden, emo: Plunker

Updated demo mit ng-repeat

Quelle

2013-04-23 08:05:12

WORKS !! Danke. –

Dies ist eine Lösung für das Problem, aber es ist nicht die richtige Lösung. Diese Lösung ist eng mit der Struktur Ihres HTML verknüpft. Ich weiß, dass @Arun P Johny Ihnen eine Lösung gab, um Ihr unmittelbares Problem zu lösen, aber ich denke, er sollte es unterlassen. Es ist ein schlechter Dienst für den Rest der Entwickler (hauptsächlich für den nächsten Entwickler, der mit diesem Code arbeiten wird!). – ganaraj

@ganaraj ja, wie ich in der Antwort darauf hingewiesen habe, ist es nur, um das Problem zu lösen, vor dem er steht. –

Da Sie angular verwenden, sollten Sie sehr selten eine tatsächliche Dom-Manipulation durchführen. Sehen Sie sich stattdessen die Richtlinie ng-hide/ng-show an, die dies für Sie tun sollte.

Ein Beispiel aus dem Winkel docs:

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

bearbeitet

Wenn die Variable in dem Ausdruck asynchron aktualisiert wird, können Sie ein mit $scope.$apply aktualisiert zwingen Hinweis

Quelle

2013-04-23 08:01:05 NilsH

Wie ich sagte, benötige ich jquery, um meine Arbeit zu tun. Die Einschränkung mit ng-hide ist, dass die Variable, auf der sie aufgerufen wird, in einer Callback-Funktion aktualisiert wird und somit ng-hide nicht aktualisiert wird. –

Dann sollten Sie in der Lage sein, ein Update mit ['$ sope. $ Apply '] (http://docs.angularjs.org/api/ng.$rootScope.Scope) – NilsH

zu erzwingen. Ich werde es auf jeden Fall überprüfen. Danke –

Sie können diese verwenden:

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>

Live demo

Quelle

2013-04-23 08:07:35

Definitiv funktioniert .... Aber Arun posted die Antwort vor und das ist genauer, was ich brauche .. Also nur ein +1. –

Ja, das ist fair :-) –

Warum machst du nicht so einfach wie diese? Ich nehme an, Sie laufen in Schleife ...

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

oder noch besser

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

(ich habe es nicht testen, aber es sollte Ihnen Idee geben)

Quelle

2013-09-17 22:02:13 lokers

Holen Sie sich das $ This in angularjs

Antwort

Verwandte Themen