文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使简单的<md-芯片>在没有<md-芯片>的AngularJS材料中工作？

问如何使简单的<md-芯片>在没有<md-芯片>的AngularJS材料中工作？
EN

Stack Overflow用户

提问于 2019-04-01 12:32:55

回答 1查看 679关注 0票数 0

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

我使用的是AngularJS材料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材料文档中找不到类似的方法。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>工作呢？谢谢!

javascript

angularjs

angularjs-material

回答 1

Stack Overflow用户

发布于 2019-04-01 14:51:52

解决办法之一是重写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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55455225

复制

相似问题

问如何使简单的<md-芯片>在没有<md-芯片>的AngularJS材料中工作？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使简单的<md-芯片>在没有<md-芯片>的AngularJS材料中工作？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使简单的<md-芯片>在没有<md-芯片>的AngularJS材料中工作？
EN