当路线收到号码时,如何隐藏menu
元素?
实施例: 第一种情况:如果当前路由是http:base.com/files,当路由更改为http:base.com/files/1(可能有任何数字值)时,菜单应隐藏。
第二种情况:如果当前路由是http:base.com,当路由更改为http:base.com/diff/1/2时,菜单应隐藏(可能有任何数字值)。
第三种情况(类似于第二种情况,只有默认路由不同):如果当前路由为http:base.com/diff,则当路由更改为http:base.com/diff/1/2时,菜单应隐藏(可能有任何数字值)。
基本上,当用户从类files
中选择一个复选框(它只会获得一个数字),或者当用户从类diff
中选择两个复选框时,路线会发生变化(它将获得两个数字/ X / Y)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
<div class="menu" ng-show="collapsed">
<div class="files">
<input type="checkbox" />
<label>first</label>
<input type="checkbox" />
<label>second</label>
</div>
<div class="diff">
<input type="checkbox" />
<label>first</label>
<input type="checkbox" />
<label>second</label>
</div>
</div>
</div>
如果这有帮助,我的scope
中有以下controller
:
scope.update_selection = function(updated_file_id){
selected_count = 0;
if (scope.is_initial_selection){
scope.is_initial_selection = false;
scope.file_map = {};
scope.file_map[updated_file_id] = true;
}
if (scope.number_of_files == 1){
path = '/files/' + updated_file_id;
$location.path(path);
}
else {
updated_file_selected = scope.file_map[updated_file_id];
if (updated_file_selected) {
//search for the other file
found = false;
for (file_id in scope.file_map){
if (file_id == updated_file_id)
continue;
found = scope.file_map[file_id];
if (found == true){
scope.file_1_id = file_id;
scope.file_2_id = updated_file_id;
break;
}
}
if (!found){
scope.file_1_id = updated_file_id;
return;
}
}
path = '/diff/' + scope.file_1_id + '/' + scope.file_2_id
$location.path(path);
}
}
答案 0 :(得分:0)
检查这个答案。
var app = angular.module('myApp', [])
app.controller('DemoController', function($scope) {
$scope.collapsed = false;
$scope.selectedObject = {
'num': 0,
'item': ''
};
$scope.checkValue = function(number, item) {
$scope.selectedObject.num = parseInt(number);
$scope.selectedObject.item = item;
}
$scope.toggleMenu = function(){
$scope.collapsed = true;
}
})
&#13;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="DemoController">
<a href="#" class="toggle-menu" ng-if="!collapsed" ng-click="toggleMenu()">Click to toggle menu</a>
<div class="menu" ng-show="collapsed">
<div class="files" ng-if="selectedObject.num<1">
<input type="checkbox" ng-click="checkValue('files')" />
<label>first</label>
<input type="checkbox" ng-click="checkValue('files')" />
<label>second</label>
</div>
<div class="diffs" ng-if="selectedObject.num<1">
<input type="checkbox" ng-click="checkValue('diffs')" />
<label>first</label>
<input type="checkbox" ng-click="checkValue('diffs')" />
<label>second</label>
</div>
</div>
</div>
</div>
</body>
</html>
&#13;