Question

是否可以通过按钮单击（以编程方式）在属性show和hide之间切换？我有一张带有地图和列表视图的卡片。这些通常并排显示。在移动设备上，但是列表视图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>

更新

摘要

我希望有两列可以在移动设备上切换，并且可以在更大的设备上并排使用。

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以编程方式在show和hide之间切换

3 个答案: