AngularJS:路由收到号码时如何隐藏菜单

时间:2016-04-01 09:52:48

标签: javascript angularjs

当路线收到号码时,如何隐藏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)

JSFIDDLE

<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);
    }
}

1 个答案:

答案 0 :(得分:0)

检查这个答案。

&#13;
&#13;
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;
&#13;
&#13;