Как сделать простоработать безв AngularJS материал? - PullRequest
Новая
       13

Как сделать простоработать безв AngularJS материал?

0 голосов
/ 01 апреля 2019

Пожалуйста, прости меня, что мой родной язык не английский:)

Я использую 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>? Спасибо!

1 Ответ

0 голосов
/ 01 апреля 2019

Один из обходных путей - переписать 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

Чип все еще в компоненте чипов. Это не очень хорошая идея.

...