AngularJS- comment cacher des éléments en utilisant ng-hide?

Question

J'ai une application qui a été écrite en AngularJS, et j'essaie actuellement d'ajouter la fonctionnalité pour cacher les titres de certains widgets affichés sur l'une des pages Web lorsque l'utilisateur sélectionne une case à cocher pour indiquer qu'ils devraient être cachés.

Pour l'instant, j'ai une page qui affiche un certain nombre de widgets - sur le «titre» de chaque widget, il y a un bouton «Paramètres». Lorsque l'utilisateur clique sur le bouton Paramètres, une boîte de dialogue s'ouvre en haut de la page en cours (c'est-à-dire que l'utilisateur ne navigue pas vers une autre page - l'URL ne change pas du tout). Cette boîte de dialogue contient un formulaire avec un certain nombre de champs de saisie, dont l'un est une case à cocher que je veux utiliser pour «masquer» les en-têtes de tous les widgets de la page Web.

Je suis l'exemple à: https://docs.angularjs.org/api/ng/directive/ngHide pour essayer de le faire, mais ne peut pas sembler tout à fait pour le faire fonctionner ...

J'ai ajouté l'attribut ng-hide à mon élément HTML, comme dans le exemple:

<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 définit la fonction hideWidgetHeading() dans le fichier ctrl.js comme suit:

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

et j'ai ajouté le CSS suivant à mon dossier widgets.scss:

.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; 
} 

Quand je charge ma page comme il est actuellement, quand je clique sur le bouton Paramètres, la boîte de dialogue ouvre. Si je puis vérifier le « widget Cacher rubrique » case à cocher, puis cliquez sur Envoyer, le débogage que j'ai ajouté affiche les éléments suivants dans la console:

Value of hideWidgetHeading: true

qui me dit que le code dans la fonction $scope.$watch(...){...} est en cours d'exécution. Toutefois, si je clique sur le bouton Paramètres, puis ne cochez pas la case "Masquer le titre du widget", ou cochez-la et décochez-la à nouveau, puis cliquez sur Envoyer, la même valeur true s'affiche dans le console debug, qui indique que le code à l'intérieur de la fonction $scope.$watch(...){...} est en cours d'exécution, que l'élément 'seen' soit modifié ou non.

Questions

1. Comment puis-je faire en sorte que le code de la $scope.$watch(...){...} ne fonctionne que lorsque l'élément « surveillé » (à savoir la case à cocher) a changé sa valeur? Comment puis-je réellement appeler le code CSS que j'ai ajouté pour masquer les éléments HTML sur le code HTML que je souhaite masquer? Ou comment puis-je faire en sorte que ce CSS «s'applique» aux éléments HTML que je veux cacher?

Modifier

j'ai changé le code HTML de la case à cocher:

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

comme l'a suggéré, et quand je navigue maintenant sur ma page, et d'ouvrir la boîte de dialogue, il affiche les widget que je m'attends:

Lorsque je clique sur le bouton « Paramètres » sur le widget, la boîte de dialogue « Configurer article » ouvre au-dessus de la page:

Mais quand je sélectionne le « widget Cacher rubrique » case à cocher, il fait masque la zone de saisie étiquette « Tag » & de la boîte de dialogue:

l'élément que je veux cacher est réellement affiché sur la page à partir de laquelle la boîte de dialogue est ouverte, pas sur la boîte de dialogue lui-même .. mais je n'arrive pas à comprendre comment je peux me cacher e qu'en utilisant un contrôle sur le dialogue ... Des suggestions?

Answer 1

Donc, cela devrait fonctionner, il est même le first example shown in their docs, avec votre code, il sera:

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

vous pouvez garder des fonctions sur les événements si vous blême pour connecter des valeurs, mais il n'y a pas besoin de cache. La directive ng-model mettra à jour votre valeur et le ng-hide devrait suivre.

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

Ce que je disais à propos de la fonction ou var: dans certains cas, je l'habitude d'avoir des valeurs du champ d'application qui ne sont pas mis à jour, et la solution est d'introduire une fonction à appeler pour récupérer la valeur. C'est ce que je pensais que vous essayiez parce que ng-hide="hideWidgetHeading" montre le même nom que votre fonction: function hideWidgetHeading(){, c'est pourquoi j'ai d'abord dit que les parenthèses étaient manquantes. Donc, une autre version serait quelque chose comme ça (sans modèle ng-exprès, pour montrer une autre façon de modifier des choses avec vos événements):

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

et les 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; 
}; 

Désolé j'étais un peu rapide dans le nommage vars et autres, mais vous devriez obtenir ce dont vous avez besoin ici ..