javascript - examples - ng-show angularjs

¿Cómo puedo alternar un ng-show en AngularJS basado en un booleano?

Question

Tengo un formulario para responder a los mensajes que quiero mostrar solo cuando isReplyFormOpen es verdadero, y cada vez que hago clic en el botón de respuesta deseo alternar si el formulario se muestra o no. ¿Cómo puedo hacer esto?

Answer 1

Aquí hay un ejemplo para usar las directivas ngclick & ng-if.

Nota : ng-if elimina el elemento del DOM, pero ng-hide solo oculta la visualización del elemento.

<!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> -->
<input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input>
<div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow">
Enter book name: <input type = "text" ng-model = "book.name"><br>
Enter book category: <input type = "text" ng-model = "book.category"><br>
Enter book price: <input type = "text" ng-model = "book.price"><br>
Enter book author: <input type = "text" ng-model = "book.author"><br>
You are entering book: {{book.bookDetails()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller(''bookController'', function($scope) {
$scope.book = {
name: "",
category: "",
price:"",
author: "",
bookDetails: function() {
var bookObject;
bookObject = $scope.book;
return "Book name: " + bookObject.name + ''/n'' + "Book category: " + bookObject.category + " /n" + "Book price: " + bookObject.price + " /n" + "Book Author: " + bookObject.author;
}
};
});
</script>

Answer 2

Básicamente lo resolví al NO -ing the isReplyFormOpen value cada vez que se hace clic:

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-init="isReplyFormOpen = false" ng-show="isReplyFormOpen" id="replyForm">
<!-- Form -->
</div>

Answer 3

Si se basa en hacer clic aquí, es:

ng-click="orderReverse = orderReverse ? false : true"

Answer 4

Si tiene varios menús con submenús, puede ir con la siguiente solución.

HTML

 <ul class="sidebar-menu" id="nav-accordion">
<li class="sub-menu">
<a href="" ng-click="hasSubMenu(''dashboard'')">
<i class="fa fa-book"></i>
<span>Dashboard</span>
<i class="fa fa-angle-right pull-right"></i>
</a>
<ul class="sub" ng-show="showDash">
<li><a ng-class="{ active: isActive(''/dashboard/loan'')}" href="#/dashboard/loan">Loan</a></li>
<li><a ng-class="{ active: isActive(''/dashboard/recovery'')}" href="#/dashboard/recovery">Recovery</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="" ng-click="hasSubMenu(''customerCare'')">
<i class="fa fa-book"></i>
<span>Customer Care</span>
<i class="fa fa-angle-right pull-right"></i>
</a>
<ul class="sub" ng-show="showCC">
<li><a ng-class="{ active: isActive(''/customerCare/eligibility'')}" href="#/CC/eligibility">Eligibility</a></li>
<li><a ng-class="{ active: isActive(''/customerCare/transaction'')}" href="#/CC/transaction">Transaction</a></li>
</ul>
</li>
</ul>

Hay dos funciones que he llamado primero es ng-click = hasSubMenu (''dashboard''). Esta función se usará para alternar el menú y se explica en el código a continuación. El ng-class = "{active: isActive (''/ customerCare / transaction'')} agregará una clase activa al elemento de menú actual.

Ahora he definido algunas funciones en mi aplicación:

Primero, agregue una dependencia $ rootScope que se usa para declarar variables y funciones. Para obtener más información sobre $ roootScope, consulte el enlace: https://docs.angularjs.org/api/ng/service/ $ rootScope

Aquí está mi archivo de aplicación:

 $rootScope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};

La función anterior se utiliza para agregar una clase activa al elemento de menú actual.

 $rootScope.showDash = false;
$rootScope.showCC = false;
var location = $location.url().split(''/'');
if(location[1] == ''customerCare''){
$rootScope.showCC = true;
}
else if(location[1]==''dashboard''){
$rootScope.showDash = true;
}
$rootScope.hasSubMenu = function(menuType){
if(menuType==''dashboard''){
$rootScope.showCC = false;
$rootScope.showDash = $rootScope.showDash === false ? true: false;
}
else if(menuType==''customerCare''){
$rootScope.showDash = false;
$rootScope.showCC = $rootScope.showCC === false ? true: false;
}
}

Por defecto $ rootScope.showDash y $ rootScope.showCC están configurados en falso. Establecerá los menús a cerrado cuando la página se carga inicialmente. Si tiene más de dos submenús añada en consecuencia.

La función hasSubMenu () funcionará para alternar entre los menús. He agregado una condición pequeña si (ubicación [1] == ''customerCare'') {$ rootScope.showCC = true; } else if (location [1] == ''dashboard'') {$ rootScope.showDash = true; } seguirá siendo el submenú abierto después de volver a cargar la página según el elemento de menú seleccionado.

Definí mis páginas como:

$routeProvider
.when(''/dasboard/loan'', {
controller: ''LoanController'',
templateUrl: ''./views/loan/view.html'',
controllerAs: ''vm''
})

Puede usar la función isActive () solo si tiene un solo menú sin submenú. Puede modificar el código de acuerdo a sus requerimientos. Espero que esto ayude Que tengas un gran día :)

Answer 5

Solo tiene que alternar el valor de "isReplyFormOpen" en el evento ng-click

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-show="isReplyFormOpen" id="replyForm">
</div>

Answer 6

Vale la pena señalar que si tiene un botón en el Controlador A y el elemento que desea mostrar en el Controlador B, es posible que necesite usar la notación de puntos para acceder a la variable de ámbito en los controladores.

Por ejemplo, esto no funcionará:

<div ng-controller="ControllerA">
<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-controller="ControllerB">
<div ng-show="isReplyFormOpen" id="replyForm">
</div>
</div>
</div>

Para resolver esto, crea una variable global (es decir, en el Controlador A o tu Controlador principal):

.controller(''ControllerA'', function ($scope) {
$scope.global = {};
}

A continuación, agregue un prefijo ''global'' a su clic y muestre las variables:

<div ng-controller="ControllerA">
<a ng-click="global.isReplyFormOpen = !global.isReplyFormOpen">Reply</a>
<div ng-controller="ControllerB">
<div ng-show="global.isReplyFormOpen" id="replyForm">
</div>
</div>
</div>

Para obtener más detalles, consulte los Estados anidados y las vistas anidadas en la documentación de la interfaz de usuario angular , vea un video o lea los alcances de comprensión .