0

我已经看到一些问题在保持输入顶部的同时垂直堆叠 md-chips，但我想在输入行下堆叠 md-chips，就像它在 google 和 pinterest 中的样子一样在此处输入图像描述

我希望输入字段在顶部，芯片应该堆叠在行
下面我给出了垂直堆叠的代码
谢谢

angular
  .module('MyApp', ['ngMaterial'])
  .controller('demoCtrl', function($scope) {

    $scope.myChips = ['AAA', 'BBB', 'CCC'];
  });
<head>
  <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <style>
    md-chip {
      clear: left;
    }
    
    .md-chips {
      background-color: beige;
    }
    
    .md-chips .md-chip-input-container {
      float: none;
    }
    
    .md-chip-input-container .md-input {
      border: 1px solid black !important;
      margin-top: 8px;
    }
  </style>
</head>

<body>
  <div ng-controller="demoCtrl" ng-app="MyApp">
    <md-chips ng-model="myChips">
      <md-chip-template>
        <strong>{{$chip}}</strong>
      </md-chip-template>
    </md-chips>
  </div>
</body>

4

2 回答 2

0

只需清除您编写的此代码：

md-chip {
   clear: left;
}

这里是 CodePen 示例

angular
  .module('MyApp', ['ngMaterial'])
  .controller('demoCtrl', function($scope) {

    $scope.myChips = ['AAA', 'BBB', 'CCC'];
  });
<head>
  <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <style>
    
    .md-chips {
      background-color: beige;
    }
    
    .md-chips .md-chip-input-container {
      float: none;
    }
    
    .md-chip-input-container .md-input {
      border: 1px solid black !important;
      margin-top: 8px;
    }
  </style>
</head>

<body>
  <div ng-controller="demoCtrl" ng-app="MyApp">
    <md-chips ng-model="myChips">
      <md-chip-template>
        <strong>{{$chip}}</strong>
      </md-chip-template>
    </md-chips>
  </div>
</body>

于 2017-12-11T08:03:14.960 回答
-1

我通过不断更改我得到的属性找到了一种解决方案，一种hack或其他什么
这是代码笔
https://codepen.io/avreddy/pen/ppzraz 

angular
  .module('MyApp', ['ngMaterial'])
  .controller('demoCtrl', function($scope) {

    $scope.myChips = ['AAA', 'BBB', 'CCC'];
  });
    
    .md-chips {
      background-color: beige;
      display: flex !important;
      flex-wrap: wrap;
    }
    .md-chips md-chip{
    order: 2;
    }
    .md-chips .md-chip-input-container {
     order: 1;
  width: 100%;
    }
    
    .md-chip-input-container .md-input {
      border: 1px solid black !important;
      margin-top: 8px;
    }
<head>
  <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
</head>

<body>
  <div ng-controller="demoCtrl" ng-app="MyApp">
    <md-chips ng-model="myChips">
      <md-chip-template>
        <strong>{{$chip}}</strong>
      </md-chip-template>
    </md-chips>
  </div>
</body>

于 2017-12-11T09:33:02.450 回答