Make simple <md-chip> work without <md-chips> in AngularJS Material?
发表Tech / FrontEnd1 分钟读完 (大约196个字)  次访问

Make simple <md-chip> work without <md-chips> in AngularJS Material?

I’m using AngularJS Material v1.1.1.
I’m finding a way to use simple <md-chip> without <md-chips>.

Here is an easy way in Vue Material: https://codesandbox.io/s/lyoqv4l0z?module=App.vue

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

But I can not find the similiar way in AngularJS Material document.
https://material.angularjs.org/latest/api/directive/mdChip

Here is my code:
https://codepen.io/iMaeGoo/pen/EJaaqp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
1
2
3
4
angular.module('myApp',['ngMaterial']).controller('AppCtrl', function($scope) {
    $scope.chips = ["A chip in chips!"];
    $scope.oneChip = "A chip without chips!";
});

One workaround is to rewrite CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
  }
}
1
2
3
<md-chips class="chips" ng-model="chips" md-max-chips="1">
    <md-chip-template>{{ $chip }}</md-chip-template>
</md-chips>
1
2
3
angular.module('myApp', ['ngMaterial']).controller('AppCtrl', function($scope) {
    $scope.chips = ["One chip"];
});

See: https://codepen.io/iMaeGoo/pen/BEyKem

The chip is still in chips component. It is not a good idea.

Feel free to answer if you have better idea!
https://stackoverflow.com/questions/55455225/how-to-make-simple-md-chip-work-without-md-chips-in-angularjs-material

Make simple <md-chip> work without <md-chips> in AngularJS Material?

https://www.imaegoo.com/2019/md-chip-without-md-chips/

作者

iMaeGoo

发布于

2019-04-02

更新于

2019-04-02

许可协议

CC BY 4.0

#

喜欢这篇文章？打赏一下作者吧

评论

GitHub
微信二维码

归档

最新文章

最新评论

×