回答:
ng-clickイベントで「isReplyFormOpen」の値を切り替えるだけです
<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。ありがとうございました:)♥。
基本的に私はそれを解決しました ないで -ing 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
コントローラー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>詳細については、チェックアウト角度-UIドキュメントのネストされた米国＆ネストされたビューを、ビデオを見る、または読み理解スコープを。
ngclick＆ng-ifディレクティブを使用する例を次に示します。
注：ng-ifはDOMから要素を削除しますが、ng-hideは要素の表示を非表示にするだけです。
<!-- <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>私が最初に呼び出した2つの関数はng-click = hasSubMenu（ 'dashboard'）です。この関数は、メニューを切り替えるために使用され、以下のコードで説明されています。ng-class = "{active：isActive（ '/ customerCare / transaction'）}は、現在のメニュー項目にアクティブなクラスを追加します。
今私は私のアプリでいくつかの機能を定義しました：
最初に、変数と関数の宣言に使用される依存関係$ rootScopeを追加します。$ roootScopeの詳細については、リンクを参照してください：https ://docs.angularjs.org/api/ng/service/ //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に設定されています。これは、ページが最初にロードされたときにメニューをクローズに設定します。3つ以上のサブメニューがある場合は、適宜追加してください。
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（）関数は、サブメニューのない単一のメニューがある場合にのみ使用できます。必要に応じてコードを変更できます。これがお役に立てば幸いです。すてきな一日を ：）