如何在Angular中暗示星形？

Question

要求：点击按钮即可添加星形。

我已经实现了在html中使用ng样式添加一个圆圈，现在我想以类似的方式实现星形，为此我需要写一个不同的类＆＃34; star-six＆＃34;在css。

但是html代码下面已经包含了一个css类＆＃34; shapeClass＆＃34;。我在我的控制器方法中使用了下面的jquery代码并添加了css类＆＃34; star-six＆＃34;。

我面临的问题是我的新css课程＆＃34; star-six＆＃34;正在取代现有的类＆＃34; shapeClass＆＃34;对于所有的div。

有人可以告诉我们如何使用下面的控制器来控制星形。

HTML：

 <div class="shapeClass" ng-repeat="element in viewModel.elementContainer.element"
                 data-ng-style="shapeCtrl.getShapeStyle($index)">

  </div>

控制器：

vm.getShapeStyle = function (index) {

            if ($scope.viewModel.elementContainer.element[index].name == "addCircle") {

                    return {
                    "width": "100px",
                    "height": "100px",
                    "background": "red",
                    "-moz-border-radius": "50px",
                    "-webkit-border-radius": "50px",
                    "border-radius": "50px"

                };

            }

            if ($scope.viewModel.elementContainer.element[index].name == "addStar") {
                $('.shapeClass').hasClass('star-six')
                if ($('.star-six').hasClass('shapeClass')) {
                    $('.star-six').removeClass('shapeClass');
                }
                return {


                };

            }

CSS：

.shapeClass {
  margin: 3px;
  border: 1px solid;
 position: relative;
  background-color: blue;
  overflow: hidden;
}

.star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}
.star-six:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}