0
\t // create the module and name it scotchApp
\t var app = angular.module("peykaar",[]);
\t
app.controller('main', function($scope , $rootScope ,$location) {
/* =========================== TABS =========================== */
$scope.tab = 1;
$scope.setTab = function (number) {
$scope.tab = number;
}
$scope.isSetTab = function (tabNum) {
return $scope.tab === tabNum;
}
/* =========================== /TABS =========================== */
// /* =========================== FILTER ========================== */
//$scope.flag;
$scope.showFilter = false;
$scope.toggleFilters = function() {
$scope.showFilter = !$scope.showFilter;
}
// /* ========================== /FILTER =========================== */
});<!DOCTYPE html>
<html ng-app="peykaar">
<head>
\t <meta charset="UTF-8">
\t <title> Peykaar </title>
\t <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
\t <!-- Bootstrap Grid System -->
\t <link rel="stylesheet" href="sorce/node_modules/bootstrap/bootstrap.min.css">
\t <link rel="stylesheet" href="sorce/node_modules/bootstrap/bootstrap-theme.min.css">
\t <!-- /Bootstrap Grid System -->
<link media="all" rel="stylesheet" type="text/css" href="sorce/node_modules/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="sorce/custom/css/fonts.css">
\t <link rel="stylesheet" href="sorce/custom/css/layout.css">
\t <link rel="stylesheet" href="sorce/custom/css/main.css">
\t <link rel="stylesheet" href="sorce/custom/css/bookmark.css">
</head>
<body ng-controller="main">
\t
<header class="header">
\t <div class="logo">LOGO</div>
\t <ul class="nav">
\t \t <li><span class="mdi mdi-menu"><!-- mdi-notification-clear-all --></span></li>
\t \t <li><a href="#/bookmark"><span class="mdi mdi-bookmark"></span></a></li>
\t \t <li><span class="mdi mdi-bell"><!-- bell-ring --></span></li>
\t \t <li><button class="mdi mdi-filter" ng-click="toggleFilters()">Click ME</button></li>
\t </ul>
</header>
<section class="main-section">
<!-- Main Container -->
<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-controller="main">
\t <!-- LEFT SIDE (Result) -->
\t <div class="left-side main-sides results col-lg-7 col-md-7 col-sm-6 col-xs-12">
\t \t <ng-view></ng-view>{{showFilter}}
\t </div>
\t <!-- LEFT SIDE (Result) -->
\t <!-- RIGHT SIDE (FILTERS) -->
\t <div class="right-side main-sides filters col-lg-5 col-md-5 col-sm-6 col-xs-12"
\t \t ng-class="{'filterOpen': showFilter}">
\t \t
\t \t <!-- TABS NUMBER -->
\t \t <div class="tabs" ng-class="{activeTab : isSetTab(1)}">
\t \t \t <div class="tabs-content">
\t \t \t \t DATA NUMBER 1
\t \t \t </div>
\t \t </div>
\t \t <!-- TABS NUMBER -->
\t \t <div class="tabs" ng-class="{activeTab : isSetTab(2)}">
\t \t \t <div class="tabs-content">
\t \t \t \t DATA NUMBER 2
\t \t \t </div>
\t \t </div>
\t \t <!-- TABS NUMBER -->
\t \t <div class="tabs" ng-class="{activeTab : isSetTab(3)}">
\t \t \t <div class="tabs-content">
\t \t \t \t DATA NUMBER 3
\t \t \t </div>
\t \t </div>
\t \t <div class="tab-locs">
\t \t \t <span class="tab-num" ng-click="setTab(1)"></span>
\t \t \t <span class="tab-num" ng-click="setTab(2)"></span>
\t \t \t <span class="tab-num" ng-click="setTab(3)"></span>
\t \t </div>
\t </div>
\t <!-- /RIGHT SIDE (FILTERS)-->
</div>
<!-- /Main Container -->
</section>
</body>
<!-- AngularJs Framework and dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</html>私はここで少し問題を抱えている、 NG-クリック機能は、機能 内のスコープ値を変更しますが、この関数の外のスコープ値を更新しません。
と$ scope。$ apply（）はここでは機能しません。 皆さんありがとうございました。
var app = angular.module('app', []);
function ctrl($scope, $rootScope, $location) {
$scope.showFilter = false;
$scope.toggleFilters = function() {
$scope.showFilter = !$scope.showFilter;
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<button class="mdi mdi-filter" ng-click="toggleFilters()">when i click this button The false value should be True</button>
<div ng-class="{'filterOpen': showFilter}" class="left-side main-sides results col-lg-7 col-md-7 col-sm-6 col-xs-12">
{{showFilter}}
</div>
</div>
</div>
ng-clickはどこですか？ – rrd
すべてのHTMLタグと機能は同じコントローラにあります。 –
上記のコードスニペットを実行すると、アプリケーションが未定義であることが示されています。動作するコードスニペットを更新してください。 – AhammadaliPK