ngFor中的動態CSS類

Question

嗨，我正在研究純CSS的星級，但在CSS類別上卻遇到了困難。 當我將鼠標懸停在其他星級上時，第一個或前5個星級正在懸停。

像這張照片一樣，我試圖對第二個問題進行評分，但是第一個問題中的前五顆星也在徘徊。 這是我的代碼

<ng-container *ngFor="let x of evaluation_form; let i = index">
  <div class="row">
    <div class="col-md-4">
      <p style="font-size: 16pt">Name:<strong style="font-size: 16pt"> {{x.emp_name}}</strong></p>
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <p style="font-size: 16pt">Position:<strong style="font-size: 16pt">{{x.position}}</strong></p>
    </div>
  </div>
  <div class="row" *ngFor="let y of x.segments; let j = index" [@hideShowAnimator]="i == hideShowAnimator">
    <div class="col-md-6 col-md-offset-5" style="font-size: 35pt; color: #3c8dbc;">{{ y.segment_name }}</div>
    <div *ngFor="let z of y.question_collection ; let o = index">
      <br>
      <div class="row">
        <div class="col-md-11">
          <strong style="font-size: 16pt">{{ z.question }}</strong>
        </div>
      </div>
      <div>
        <div class="row">
          <div class="col-md-11">
            <fieldset class="rating">
              <input type="radio" id="star5" name="{{y.segment_name}}x{{z.q_id}}" value="5" (change)="changeRatingValue(i,j,o,5)" /><label for="star5"></label>
              <input type="radio" id="star4" name="{{y.segment_name}}x{{z.q_id}}" value="4" (change)="changeRatingValue(i,j,o,4)" /><label for="star4"></label>
              <input type="radio" id="star3" name="{{y.segment_name}}x{{z.q_id}}" value="3" (change)="changeRatingValue(i,j,o,3)" /><label for="star3"></label>
              <input type="radio" id="star2" name="{{y.segment_name}}x{{z.q_id}}" value="2" (change)="changeRatingValue(i,j,o,2)" /><label for="star2"></label>
              <input type="radio" id="star1" name="{{y.segment_name}}x{{z.q_id}}" value="1" (change)="changeRatingValue(i,j,o,1)" /><label for="star1"></label>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row" (click)="hideShowAnimation(i)">
    <button class="button"><span>Next </span></button>
  </div>
</ng-container>

這是我設置單選按鈕樣式的CSS

.rating {
  float: left;
}

.rating:not(:checked)>input {
  position: absolute;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}

.rating:not(:checked)>label {
  float: right;
  width: 1em;
  padding: 0 .1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 302%;
  line-height: 1.2;
  color: #ddd;
  text-shadow: 1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, .5);
}

.rating:not(:checked)>label:before {
  content: '★ ';
}

.rating>input:checked~label {
  color: #f70;
  text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, .5);
}

.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
  color: gold;
  text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}

我只想讓我的5個評分在每個問題中都充滿活力。 我只想知道如何在Angular 2中進行操作。在此先感謝您的幫助

Answer 1

除非出於某種原因想要從頭開始實現它，否則為什么不考慮一個靈活且可配置的現有解決方案呢？

看看這個插件

https://www.npmjs.com/package/angular-star-rating

Answer 2

編輯

我為錯誤提供的angularJS答案表示歉意。 這是Angular版本。

TLDR； 在懸停事件和樣式上為該類添加一個類。

的HTML

<fieldset class="rating">
    <input type="radio" (mouseover)="z.active=true" (mouseout)="z.active=false" id="star5" name="{{y.segment_name}}x{{z.q_id}}" value="5" (change)="changeRatingValue(i,j,o,5)" />
    <label [ngClass]="{'active': z.active}" for="star5"></label>
...
</fieldset>

的CSS

.rating:not(:checked)>label.active:hover,
.rating:not(:checked)>label.active:hover~label {
    color: gold;
    text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}

---

AngularJS

嘗試在ng-mouseover上設置一個active類並為其設置樣式。

的HTML

<fieldset class="rating">
    <input type="radio" ng-mouseover="z.active=true" ng-mouseleave="z.active=false" id="star5" name="{{y.segment_name}}x{{z.q_id}}" value="5" (change)="changeRatingValue(i,j,o,5)" />
    <label ng-class="{active: z.active}" for="star5"></label>
...
</fieldset>

的CSS

.rating:not(:checked)>label.active:hover,
.rating:not(:checked)>label.active:hover~label {
    color: gold;
    text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}