ng-repeat中的无线电组未按预期工作

Question

A simple star rating required for each repeated item. But It's not giving the results as expected.

Every item's star rating changes or affects the first row.

I have changed the name attribute of my input type to add -{{$index}} but still can't make it work.

My 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":"9999999999","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":"9999999999","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

I've just write some code here using your question and it seems that you need to change value attribute to ng-value attribute in your radio elements. ng-value will change the property in your item.

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

Here my jsfiddle: http://jsfiddle.net/y6sc0g4k/2/

Answer 2

There is no reasons to use the name attribute at all. If you dont need to bind anything in the value , you also dont have to use ng-value , use just value . look over the example here:

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