Question

请原谅我的母语不是英语：）

我正在使用AngularJS Material v1.1.1。我正在寻找一种在没有<md-chip>的情况下使用简单<md-chips>的方法。

这是Vue材质中的一种简便方法：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-chip>的情况下如何使<md-chips>工作？谢谢！

Answer 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

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

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

1 个答案: