如何在没有 <md-chips> 的情况下在 AngularJS Material 中使简单的 <md-chip> 工作？答案

【问题标题】：How to make simple <md-chip> work without <md-chips> in AngularJS Material?如何在没有 <md-chips> 的情况下在 AngularJS Material 中使简单的 <md-chip> 工作？
【发布时间】：2019-04-01 22:51:52
【问题描述】：

请原谅我的母语不是英语:)

我正在使用 AngularJS Material v1.1.1。我正在寻找一种方法来使用简单的<md-chip> 而不使用<md-chips>。

这是 Vue Material 中的一种简单方法：https://codesandbox.io/s/lyoqv4l0z?module=App.vue

<md-chip class="md-primary" md-deletable>Deletable</md-chip>

但我在 AngularJS Material 文档中找不到类似的方法。 https://material.angularjs.org/latest/api/directive/mdChip

这是我的代码： https://codepen.io/iMaeGoo/pen/EJaaqp

<body ng-app="myApp" ng-controller="AppCtrl">
    <p>
        <md-chips ng-model="chips">
            <md-chip-template>
                {{ $chip }}
            </md-chip-template>
        </md-chips>
    </p>

    <p>
        <!-- I want to make this simple md-chip work here -->
        <md-chip>{{oneChip}}</md-chip>
    </p>
</body>

angular.module('myApp',['ngMaterial']).controller('AppCtrl', function($scope) {
    $scope.chips = ["A chip in chips!"];
    $scope.oneChip = "A chip without chips!";
});

如何在没有<md-chips> 的情况下使<md-chip> 工作？谢谢！

【问题讨论】：

标签： javascript angularjs angularjs-material

【解决方案1】：

一种解决方法是重写 CSS。

md-chips {
  md-chips-wrap {
    border: none;
    padding: 0;
    box-shadow: none;
    cursor: inherit;
    width: fit-content;

    ._md-chip-input-container {
      display: none;
    }
  }

  md-chip {
    margin: 0;
  }
}

见：https://codepen.io/iMaeGoo/pen/BEyKem

芯片仍在芯片组件中。这不是一个好主意。

【讨论】：