2016-03-24 5 views
0

Warum funktioniert meine App nicht richtig? Es muss ein (eine zur Zeit) zeigt den div auf der Unterseite mit dem „ng-wenn“ Tag .. Dies ist die Geige:AngularJS ng-if zeigt das DIV nicht an

Fiddle

<div class="fix" ng-if="showAdd()"> 
    <button type="button" class="btn btn-link"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 
<div class="edit" ng-if="showEdit()"> 
Modifica 
</div> 
+0

Sie können es in der Geige sehen .. das ist der code: \t \t 'funktion showEdit() { \t \t \t zurück $ s cope.startEdit &&! $ scope.startAdd; \t \t} ' – paolopolix

+0

Wo sind die Init-Werte von z. '$ scope.startEdit = startEdit', wo ist StartEdit definiert? –

+1

Ihre Funktionen geben keinen Wert zurück, weshalb Sie immer falsch angezeigt werden. –

Antwort

1

Es sieht so aus, als gäbe es einen Fehler in deiner Geige. Die Edit div wird angezeigt, wenn Sie Ihre showAdd und showEdit Methoden wie folgt ändern:

function showAdd() { 
    return $scope.addBookmark && !$scope.editBookmark; 
} 

function showEdit() { 
    return $scope.editBookmark && !$scope.addBookmark; 
} 

Das Add div wird nie hinzugefügt, da die durch die startAdd Funktion aktiviert werden würde, was nicht überall genannt wird.

Auch, bitte posten Sie Ihren Javascript-Code hier. Wenn also etwas mit deiner Geige passiert, könnte diese Frage für andere nützlich sein.

EDIT:

Ihre Schaltfläche Hinzufügen Um Ihnen dies ändern arbeiten müssen:

<div class="fix" ng-if="showAdd()"> 
    <button type="button" class="btn btn-link"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 

Um dies:

<button type="button" class="btn btn-link" ng-click="startAdd()"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
<div class="fix" ng-if="showAdd()"> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 
+0

Ihr Code funktioniert für die Bearbeitungsschaltflächen, aber es zeigt nicht das Hinzufügen div in der 'normal 'view .. – paolopolix

+0

Das liegt daran, dass der Add-Button, den Sie haben, nicht die' startAdd'-Funktion aufruft. Außerdem befindet es sich in einer "ng-if" -Richtlinie und wird daher nie angezeigt. Ich werde die Antwort mit einer Lösung bearbeiten. – rgvassar

+0

Die showAdd() muss immer angezeigt werden (wenn showEdit ausgeblendet ist), nicht auf der Schaltfläche klicken ... Wie kann ich es beheben? hhmmm – paolopolix

0

Wenn der Wunsch immer zu zeigen, die eine oder andere, dann ist es am beste Praxis, um die Ansicht zu strukturieren wie folgt:

<div class="fix" ng-if="showingAdd"> 
    <button type="button" class="btn btn-link"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 
<div class="edit" ng-if="!showingAdd"> 
Modifica 
</div> 
2

das Problem ist mit der Funktion showEdit().

Von Ihrer Geige Sie haben:

function showEdit() { 
     return $scope.startEdit && !$scope.startAdd; 
    } 

Wo startEdit und startAdd wie definiert sind:

function startAdd() { 
     $scope.addBookmark = true; 
     $scope.editBookmark = false; 
    } 


    function startEdit() { 
     $scope.editBookmark = true; 
     $scope.addBookmark = false; 
    } 

Wenn Ihr ng-wenn Anrufe showEdit() es $scope.startEdit && !$scope.startAdd;

jedoch zurück, $scope.startEdit und $scope.startAdd sind Funktionen, also werden sie "truthy" (dh evaluat e zu true in einem booleschen Ausdruck). Daher wird der boolesche Ausdruck immer als false ausgewertet (und Ihr DIV bleibt verborgen).

Siehe unten:

$scope.startEdit && !$scope.startAdd; 
true && !true 
true && false 
false 

Es sieht aus wie Sie etwas konzeptionell mit fehlenden sind entweder Funktionen oder mit Auswertung Booleschen Ausdrücken aufrufen.

Wenn Sie eine JavaScript-Funktion aufrufen möchten, müssen Sie dem Namen der Funktion in Klammern folgen, genau wie bei Ihrem ng-if="showEdit()"-Block.

Und falls $scope.showEdit() gemeint ist startAdd() und startEdit() zu nennen, sollten Sie etwas tun:

function showEdit() { 
     return $scope.startEdit() && !$scope.startAdd(); 
    } 

Sie noch ein Problem haben würde, aber, wie startEdit() und startAdd() nichts zurückgeben, und würde daher zu undefined auswerten.

Wenn Sie Ihre showEdit()-Funktion wie oben beschrieben bearbeiten und startEdit() und einen booleschen Ausdruck zurückgeben, sollten Sie gut gehen.

Verwandte Themen