Question

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

Answer 1

检查这个答案。

＆＃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;

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

1 个答案: