ng-repeatのラジオグループが期待通りに機能しない

Question

各繰り返しアイテムには、単純な星評価が必要です。しかし、期待どおりの結果を出すことはできません。

すべての商品の星評価が変更され、最初の行に影響します。

入力タイプのname属性を-{{$index}}に変更しましたが、それでも機能させることはできません。

マイHTML

<div ng-repeat="item in $ctrl.serviceList | filter: $ctrl.form.searchKey" class="c-list"> 
     <md-card> 
      <div class="group full-width pad15">  
       <div><strong>Summary:</strong>{{item.problemSummary}}</div> 
       <div style=" word-wrap: break-word"> 
        <strong>Description:</strong> 

        <span>{{item.serviceDescription}}</span> 
       </div> 
       <div> 
        <strong>Docket Id: </strong> 
        <span>{{item.docketId}}</span> 
       </div> 
       <div><strong>Transaction Id: </strong>{{item.tid}}</div> 
       <div><strong>Created At: </strong>{{item.createdAt | date: 'medium'}}</div> 
       <div><strong>Created By: </strong>{{item.userName}}</div> 
       <div><strong>Status: </strong><span class="status-text-complete">{{item.status}}</span></div> 
       <div style="border-top: 1px solid #ccc;"> 
        <div class="stars"> 
         <form> 
          <input class="star star-5" id="star-5" type="radio" name="star-{{$index}}" value="1" ng-model="item.rating" /> 
          <label class="star star-5" for="star-5"></label> 
          <input value="2" class="star star-4" id="star-4" type="radio" name="star-{{$index}}" ng-model="item.rating"/> 
          <label class="star star-4" for="star-4"></label> 
          <input value="3" class="star star-3" id="star-3" type="radio" name="star-{{$index}}" ng-model="item.rating"/> 
          <label class="star star-3" for="star-3"></label> 
          <input value="4" class="star star-2" id="star-2" type="radio" name="star-{{$index}}" ng-model="item.rating"/> 
          <label class="star star-2" for="star-2"></label> 
          <input value="5" class="star star-1" id="star-1" type="radio" name="star-{{$index}}" ng-model="item.rating"/> 
          <label class="star star-1" for="star-1"></label> 
         </form> 
        </div> 
       </div> 
      </div> 
     </md-card> 
    </div> 

UPDATE

ctrl.serviceList = response.results; 


var response = {"results":[{"_id":"587f15ba2aaf761914c89498","createdAt":"2017-01-18T07:14:02.733Z","docketId":"MPA001218012017124402","mId":"5869efdd160812d78923ed9c","mobile":"9987464702","name":"new user","problemSummary":"Training Required","serviceComments":"asfsfsf","serviceDescription":"Training Required for this POS","serviceRating":3,"serviceSubType":"Re-training request","serviceType":"Training required","source":"MPA","status":"Complete","tid":"7895451455","userName":"dummy@nseit.com","__v":0},{"_id":"5880b48d85cce60d684abc98","createdAt":"2017-01-19T12:43:57.200Z","docketId":"MPA001219012017181357","mId":"5869efdd160812d78923ed9c","mobile":"9987464702","name":"new user","problemSummary":"g67675676","serviceComments":"ghgjghjhjthjhjthjhyjhjhjhh","serviceDescription":"hyjtyj","serviceRating":2,"serviceSubType":"Re-training request","serviceType":"Training required","source":"MPA","status":"Complete","tid":"7895451456","userName":"dummy@nseit.com","__v":0}],"start":0,"end":2,"total":2,"isLastPage":true,"isFirstPage":true} 

Answer 1

私はちょうどあなたの質問を使用して、ここでいくつかのコードを書いたのだが、あなたがに値属性を変更する必要があると思われます無線要素の属性値。 ng-valueはアイテムのプロパティを変更します。ここで

<input ng-value="3" class="star star-3" id="star-3" type="radio" name="star-{{$index}}" ng-model="item.rating"/> 

私jsfiddle：http://jsfiddle.net/y6sc0g4k/2/

Answer 2

まったくname属性を使用するには何の理由はありません。 valueのものをバインドする必要がない場合は、ng-valueを使用する必要はありません。ちょうどvalueを使用してください。ここでの例に目を通す：

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D