Angular Material 以编程方式在显示和隐藏之间切换

Question

是否可以通过单击按钮（以编程方式）在属性显示和隐藏之间切换？例如，我有一张带有地图和列表视图的卡片。这些通常并排显示。在移动设备上，而是为列表视图 flex = 100 增加。地图不再显示。然而，用户应该可以在两个视图之间切换。我该怎么做？

我的示例标签：

<md-card flex-gt-xs="40" flex-xs="100">
 <list></list>
</md-card>

<md-button>toggle Views</md-button>

<md-card flex="60" hide-xs show-gt-xs >
  <leaflet height="40vh" ></leaflet>
</md-card>

更新：

总结

我想要 2 列可以在移动设备上切换，并在较大的设备上并排显示。

Answer 1

我不是 100% 确定你在问什么，但是这个 CodePen 演示了以编程方式切换的基础知识。

md-button 有一个 ng-click 属性调用函数 toggle() 来切换 view 值。 view 传递给每张卡片的 ng-if。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="height:100%" layout="column">
  <md-card flex-gt-xs="40" flex-xs="100" ng-if="view">
    Card 1
   <list></list>
  </md-card>

  <md-button ng-click="toggle()">toggle Views</md-button>

  <md-card flex="60" hide-xs show-gt-xs  ng-if="!view">
    Card2
    <leaflet height="40vh" ></leaflet>
  </md-card>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])

.controller('AppCtrl', function($scope) {
  $scope.view = true;
  $scope.toggle = function () {
    $scope.view = !$scope.view;
  }
});

如果您需要保留正在切换的元素中的信息，您可以将 ng-if 替换为 ng-show，因为 ng-if 每次为真时都会重新创建该元素。

Answer 2

我找到了解决办法。 $mdMedia 无所不能。

js:

 $scope.$watch(function () {
            return $mdMedia('sm');
        }, function (big) {
            $scope.screenIsSmall = $mdMedia('sm');
        });

查看：

   <md-card flex="60" ng-hide="screenIsSmall&&!showMap" style="max-height: 40vh">
       <md-button ng-show="screenIsSmall" ng-click="showMap = !showMap">toggle</md-button>
       <leaflet height="40vh"></leaflet>
    </md-card>

Answer 3

app.component.html

<div fxLayout="column" fxLayout.gt-sm="row wrap">
       <div fxFlex="50" class="flex-p">
              <mat-slide-toggle
                [checked]="isSlideChecked"
                (change)="toggleChanges($event)"
                >Hide/Show - card</mat-slide-toggle
              >
       </div>
</div>

<mat-card *ngIf="isSlideChecked">Simple card</mat-card>

app.component.ts

 isSlideChecked: boolean = false;

  toggleChanges($event: MatSlideToggleChange) {
    this.isSlideChecked = $event.checked;
  }

Angular Material 以编程方式在显示和隐藏之间切换

Angular Material switch between show and hide programmatically

javascript

angularjs

angular-material