У мене є форма відповіді на повідомлення, яку я хочу показувати лише тоді, коли isReplyFormOpen
це правда, і кожного разу, коли я натискаю кнопку відповіді, я хочу перемикати, відображається форма чи ні. Як я можу це зробити?
У мене є форма відповіді на повідомлення, яку я хочу показувати лише тоді, коли isReplyFormOpen
це правда, і кожного разу, коли я натискаю кнопку відповіді, я хочу перемикати, відображається форма чи ні. Як я можу це зробити?
Відповіді:
Вам просто потрібно переключити значення "isReplyFormOpen" для події ng-click
<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-show="isReplyFormOpen" id="replyForm">
</div>
ng-class
: <span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">
+1. Дякую:) ♥.
В основному я вирішив це, НЕ вказуючи isReplyFormOpen
значення кожного разу при натисканні на нього:
<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-init="isReplyFormOpen = false" ng-show="isReplyFormOpen" id="replyForm">
<!-- Form -->
</div>
ng-init
потрібне?
undefined
спочатку і!undefined == true
Якщо засновано на натисканні тут, це:
ng-click="orderReverse = orderReverse ? false : true"
Варто відзначити, що якщо у вас є кнопка в контролері A і елемент, який ви хочете показати в контролері B, можливо, вам доведеться використовувати позначення крапки для доступу до змінної області обміну через контролери.
Наприклад, це не буде працювати:
<div ng-controller="ControllerA">
<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-controller="ControllerB">
<div ng-show="isReplyFormOpen" id="replyForm">
</div>
</div>
</div>
Щоб вирішити це, створіть глобальну змінну (наприклад, у контролері A або вашому головному контролері):
.controller('ControllerA', function ($scope) {
$scope.global = {};
}
Потім додайте "глобальний" префікс до клацання та показуйте змінні:
<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>
Для більш детальної інформації перегляньте вкладені штати та вкладені представлення в документації Angular-UI , перегляньте відео чи прочитайте сфери розуміння .
Ось приклад використання директив ngclick & ng-if.
Зауважте : що ng-if видаляє елемент з DOM, але ng-hid просто приховує відображення елемента.
<!-- <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>
Якщо у вас є кілька меню з підменю, ви можете перейти до наведеного нижче рішення.
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>
Є дві функції, які я закликав спочатку - це ng-click = hasSubMenu ('інформаційна панель'). Ця функція буде використовуватися для перемикання меню, і це пояснюється в коді нижче. Ng-class = "{active: isActive ('/ customerCare / транзакція")} він додасть клас активний до поточного пункту меню.
Тепер я визначив деякі функції в моєму додатку:
Спочатку додайте залежність $ rootScope, яка використовується для оголошення змінних та функцій. Щоб дізнатися більше про $ roootScope, перейдіть за посиланням: https://docs.angularjs.org/api/ng/service/ $ rootScope
Ось мій файл програми:
$rootScope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
Вищевказана функція використовується для додавання активного класу до поточного пункту меню.
$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;
}
}
За замовчуванням $ rootScope.showDash та $ rootScope.showCC встановлені на значення false. Він встановить меню закритим, коли сторінка спочатку завантажується. Якщо у вас є більше двох підменю, додайте відповідно.
Функція hasSubMenu () буде працювати для перемикання між меню. Я додав невелику умову
if(location[1] == 'customerCare'){
$rootScope.showCC = true;
}
else if(location[1]=='dashboard'){
$rootScope.showDash = true;
}
воно залишиться відкритим підменю після перезавантаження сторінки відповідно до вибраного пункту меню.
Я визначив свої сторінки як:
$routeProvider
.when('/dasboard/loan', {
controller: 'LoanController',
templateUrl: './views/loan/view.html',
controllerAs: 'vm'
})
Ви можете використовувати функцію isActive (), лише якщо у вас є одне меню без підменю. Ви можете змінити код відповідно до своїх вимог. Сподіваюсь, це допоможе. Гарного дня :)