AngularJS- wie Elemente mit Hilfe von ng-hide verstecken?

Question

Ich habe eine App, die in AngularJS geschrieben wurde, und versuche derzeit, die Funktionen zum Ausblenden der Überschriften einiger auf einer der Webseiten angezeigten Widgets hinzuzufügen, wenn der Benutzer ein Kontrollkästchen auswählt, um anzuzeigen, dass sie ausgeblendet werden sollen.

Im Moment habe ich eine Seite, die eine Reihe von Widgets anzeigt - auf der "Überschrift" jedes Widget gibt es eine Schaltfläche "Einstellungen". Wenn der Benutzer auf die Schaltfläche Einstellungen klickt, öffnet sich ein Dialogfeld oben auf der aktuellen Seite (d. H. Der Benutzer navigiert nicht zu einer anderen Seite - die URL ändert sich überhaupt nicht). Dieses Dialogfeld enthält ein Formular mit einer Reihe von Eingabefeldern, von denen eines ein Kontrollkästchen ist, mit dem ich die Überschriften aller Widgets auf der Webseite ausblenden kann.

Ich war nach dem Beispiel an: https://docs.angularjs.org/api/ng/directive/ngHide zu versuchen, dies zu tun, kann aber durchaus nicht scheinen, um es zum Laufen zu bringen ...

Ich habe das ng-hide Attribut zu meinem HTML-Elemente hinzugefügt wird, wie in dem Beispiel:

<div data-ng-if="widget.name === 'tag-box'" ng-hide="hideWidgetHeading"> <!-- class="ng-hide"--> 
    <div class="divider"></div> 
    ... 

    <div class="divider"></div> 
    <div class="row ui-checkbox-row"> 
     <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label> 
     <div class="col-sm-8 col-xs-6"> 
      <label class="ui-checkbox"> 
       <input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="hideWidgetHeading()" ng-click="hideWidgetHeading()" ng-checked="hideWidgetHeading" ng-model="viewModel.hideWidgetHeading"> 
       <!-- ng-model="viewModel.hideWidgetHeading" --> 
       <span></span> 
      </label> 
     </div> 
    </div> 
</div> 

I definiert, um die Funktion in der hideWidgetHeading()ctrl.js Datei wie folgt:

function hideWidgetHeading(){ 
    if($scope.widgetHeadingCheckbox==false) { 
     $scope.$watch('noWidgetHeading', function() { 
      $scope.hideWidgetHeading = true; 
      console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading); 
     }); 
     return true; 
    } else { 
     console.log("hideWidgetHeading() else called (Widget/ctrl.js line 440) "); 
     $scope.$watch('noWidgetHeading', function() { 
      $scope.hideWidgetHeading = false; //document.getElementById('noWidgetHeading'); 
     }); 
     return false; 
    } 

    if($scope.hideWidgetHeading) { 
     console.log("hideWidgetHeading is true- hide the widget heading: "); 

    } 
    return $scope.hideWidgetHeading; 
} 

und ich habe folgende CSS zu meiner widgets.scss Datei hinzugefügt:

.animate-show-hide.ng-hide { 
    opacity: 0; 
} 

.animate-show-hide.ng-hide-add, 
.animate-show-hide.ng-hide-remove { 
    transition: all linear 0.5s; 
} 

.umw-tag-box { 
    opacity: 1; 
} 

Wenn ich meine Seite laden, wie es gegenwärtig ist, wenn ich auf die Schaltfläche Einstellungen klicken, wird der Dialog eröffnet. Wenn ich dann überprüfen Sie die ‚ausblenden Widget Überschrift‘ Kontrollkästchen, und klicken Sie auf Senden, die Debug, die ich hinzugefügt haben, zeigt das folgende in der Konsole:

Value of hideWidgetHeading: true

, die mir sagt, dass der Code innerhalb der $scope.$watch(...){...} Funktion ausgeführt wird.

Wenn ich jedoch auf die Schaltfläche "Einstellungen" klicke und dann entweder das Kontrollkästchen "Widget-Überschrift ausblenden" nicht ankreuze oder es abchecke und dann auf Absenden klicke, bekomme ich den gleichen true Wert angezeigt console debug, das anzeigt, dass der Code innerhalb der $scope.$watch(...){...}-Funktion ausgeführt wird, unabhängig davon, ob sich das überwachte Element ändert oder nicht.

Fragen

1. Wie kann ich, dass der Code nur innerhalb der $scope.$watch(...){...} läuft, wenn das ‚angeschaut‘ Element (das heißt die Checkbox) hat seinen Wert geändert gewährleisten?

2. Wie kann ich tatsächlich das CSS aufrufen, das ich hinzugefügt habe, um die HTML-Elemente des bestimmten HTML auszublenden, das ich ausblenden möchte? Oder wie kann ich das CSS auf die HTML-Elemente anwenden, die ich ausblenden möchte?

bearbeiten

änderte ich den HTML-Code für das Kontrollkästchen:

<input type="checkbox" ng-model="checked" name="noWidgetHeading" id="noWidgetHeading"> 

wie vorgeschlagen, und wenn ich jetzt auf meiner Seite sehen, und das Dialogfeld öffnen, zeigt es die Widget, wie ich erwarten:

Wenn ich auf das Widget die Schaltfläche ‚Einstellungen‘ klicken, wird das ‚Configure Item‘ Dialog öffnet sich oben auf der Seite nach oben:

Aber wenn ich wählen Sie das ‚Verstecken Widget Überschrift‘ Checkbox, es tatsächlich verbirgt sich die ‚Tag‘ label & Eingabefeld aus dem Dialog:

das Element, das ich eigentlich verbergen möchte, ist auf der Seite angezeigt, aus dem das Dialogfeld geöffnet wird, sich nicht auf dem Dialogfeld .. Aber ich kann nicht herausfinden, wie ich mich verstecken kann Das mit einem Steuerelement im Dialogfeld ... Irgendwelche Vorschläge?

Answer 1

So sollte, dies umgehen, ist es auch die first example shown in their docs, mit Ihrem Code wird es sein:

<div data-ng-if="widget.name === 'tag-box'" ng-hide="viewModel.hideWidgetHeading"> <!-- class="ng-hide"--> 
    <div class="divider"></div> 
    ... 

    <div class="divider"></div> 
    <div class="row ui-checkbox-row"> 
     <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label> 
     <div class="col-sm-8 col-xs-6"> 
      <label class="ui-checkbox"> 
       <input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="logWidgetHeading()" ng-click="logWidgetHeading()" ng-checked="viewModel.hideWidgetHeading" ng-model="viewModel.hideWidgetHeading"> 
       <!-- ng-model="viewModel.hideWidgetHeading" --> 
       <span></span> 
      </label> 
     </div> 
    </div> 
</div> 

Sie Funktionen auf die Ereignisse halten können, wenn Sie wan Werte loggt sein, aber es ist nicht nötig versteckt. Die ng-model-Direktive wird Ihren Wert aktualisieren und das ng-hide sollte folgen.

function logWidgetHeading(){ 
    console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading); 
} 

Was ich über Funktion oder var sagte: in einigen Fällen i vom Umfang Werte verwendet zu haben, die nicht aktualisiert wurden, und die Lösung wurde eine Funktion einzuführen, um den Wert retreive werden genannt. Es ist, was ich dachte, dass Sie versuchten, weil ng-hide="hideWidgetHeading" den gleichen Namen wie Ihre Funktion zeigt: function hideWidgetHeading(){, deshalb sagte ich zuerst, dass die runden Klammern fehlten. So würde eine andere Version so etwas wie diese (ohne ng-Modell auf Zweck, eine alternative Art und Weise zu zeigen, Dinge mit Ihren Veranstaltungen zu ändern):

<div data-ng-if="widget.name === 'tag-box'" ng-hide="getHideWidgetHeading()"> <!-- class="ng-hide"--> 
    <div class="divider"></div> 
    ... 

    <div class="divider"></div> 
    <div class="row ui-checkbox-row"> 
     <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label> 
     <div class="col-sm-8 col-xs-6"> 
      <label class="ui-checkbox"> 
       <input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="toggleWidgetHeading()" ng-checked="isHiddenWidgetHeading"> 
       <!-- ng-model="viewModel.hideWidgetHeading" --> 
       <span></span> 
      </label> 
     </div> 
    </div> 
</div> 

und die js:

//initialisation to the default value: 
$scope.isHiddenWidgetHeading = false; 

//function that toggles the value: 
$scope.toggleWidgetHeading = function(){ 
    $scope.isHiddenWidgetHeading = !$scope.isHiddenWidgetHeading; 
}; 

//function to retreive the value: 
$scope.getHideWidgetHeading = function(){ 
    return $scope.isHiddenWidgetHeading; 
}; 

Leider war ich ein bisschen schnell in der Benennung von Vars und so, aber Sie sollten bekommen, was Sie hier brauchen ..