Javascript 角度材质以编程方式在显示和隐藏之间切换

是否可以通过按钮单击（以编程方式）在属性显示和隐藏之间切换？例如，我有一张带有地图和列表视图的卡片。 它们通常并排显示。在移动设备上，但对于列表视图

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>

切换视图

更新：

总结

---

我想有两个专栏，可以在移动设备上切换，也可以在大型设备上并排切换。

我不是100%确定你在问什么，但这演示了编程切换的基本原理

md按钮

有一个

ng click

属性，该属性调用函数

toggle（）

，该函数切换

视图

值<代码>视图被传递到每张卡的

ng（如果

）

加价

<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>

---

如果需要在元素中保留信息，则可以将

ng if

替换为

ng show

，如果

每次都重新创建元素，则将其切换为
ng。
我找到了解决方案
$mdMedia
发挥了所有的魔力

js:

视图：


切换
只有当我不在应用程序的移动视图中时，代码才起作用。@laren0815更新后，我现在了解得更多了。
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])

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

 $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>