角度材料设计Flex卡

Question

我有这段代码用于显示移动设备的全宽卡，2用于ipads /平板电脑，3用于桌面。它似乎正在显示移动设备正确，但其余部分恢复为4

<div ng-controller="MerchantListCtrl" ng-cloak>
    <md-content class="md-padding" layout-xs="column" layout="row">
        <div flex-xs="100" flex-md="50" flex-gt-md="33" layout="column" ng-repeat="merchant in merchants |  filter: { featured: 'false' }" ng-show='merchants.length'>
            <md-card>
                <md-card-title>
                    <md-card-title-media>
                        <div class="md-media-lg card-media">
                            img
                        </div>
                    </md-card-title-media>
                </md-card-title>
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">{{merchant.name | limitTo:27}}<span ng-if="merchant.name.length > 27">&hellip;</span></span>
                        <span class="md-subhead">Large</span>
                    </md-card-title-text>
                </md-card-title>
            </md-card>
        </div>
    </md-content>
</div>

Answer 1

下面的工作示例。将$('form').on('submit', function(e) { e.preventDefault(); var $fromName = $('#fromName'); var $fromContactNo = $('#fromContactNo'); var $fromAddress = $('#fromAddress'); var $toName = $('#toName'); var $toContactNo = $('#toContactNo'); var $toAddress = $('#toAddress'); var $itemDesc = $('#itemDesc'); var newOrder = { "from": { "name": $fromName.val(), "phone_no": $fromContactNo.val(), "address": $fromAddress.val(), }, "to": { "name": $toName.val(), "phone_no": $toContactNo.val(), "address": $toAddress.val(), }, "item": $itemDesc.val(), }; $.ajax({ type: 'POST', url: 'https://myUrl.firebaseio.com/order.json', contentType: "application/json; charset=utf-8", data: newOrder, // no need for JSON.stringify here success: function(data) { console.log("Order added!", data); } }); }); 指令添加到layout-wrap标记中（加上一些小改动以改进样式）

md-content

angular
  .module('app', ['ngMaterial'])
  .controller('MerchantListCtrl', merchantListCtrl);

merchantListCtrl.$inject = ['$scope'];

function merchantListCtrl($scope) {
  $scope.merchants = [{
    name: 'hello',
    featured: 'false'
  }, {
    name: 'world',
    featured: 'false'
  }, {
    name: 'sdfsdfdsfsd ds;fdsfsdffds sdfsdfdf sfdfsdf',
    featured: 'false'
  }, {
    name: 'hello',
    featured: 'false'
  }, {
    name: 'world',
    featured: 'false'
  }, {
    name: 'sdfsdfdsfsd ds;fdsfsdffds sdfsdfdf sfdfsdf',
    featured: 'false'
  }];
}