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>

更新

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

我刚刚使用您的问题编写了一些代码，您似乎需要将值属性更改为无线电元素中的 ng-value 属性。 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

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

2 个答案: