Question

经过几次尝试修复我的代码，并在网上搜索任何解决方案后，我终于放弃了，并希望向你们寻求帮助。

我正在处理多组单选按钮并将其转为星级评分：

imgur link on my ratings section (cause I am not able to post images)

每个星形用1个单选按钮表示，每行有5个单选按钮。在此图像中，我创建了3组5个单选按钮。使用ng-repeat功能，

  <tr ng-repeat="number in called_numbers">
<td>             
    <div ng-if="number.name != null">
        <span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
            <input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="1"><i></i>
            <input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="2"><i></i>
            <input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="3"><i></i>
            <input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="4"><i></i>
        </span>
    </div>
</td>

现在，此特定页面会不断刷新，因此当您在特定星形上单击/突出显示时，它会刷新并再次返回5个空白星。我做的是，我创建了一个数组来临时存储每行的值。

$scope.temp_called_numbers = [];
$scope.rating_stars = {
        value:0
    };

并设置$scope.temp_called_numbers：

rate_stars = function(){
        for(i=0; i < $scope.called_numbers.length; i++){
            $scope.temp_called_numbers.push( {rating: $scope.rating_stars});
        }

    }

现在的问题是，当我在一行中选择星形/单选按钮时，其他行会获得相同的值。例如，我为第1行选择1星，其中temp_called_numbers[0].rating.value索引为0，其他所有行也获得1星。

非常感谢任何代码更改，参考或任何帮助。谢谢！

Answer 1

$scope.temp_called_numbers = [];
$scope.rating_stars = {
        value:0
    };
rate_stars = function(){
    rating = $scope.rating_stars;
    for(i=0; i < $scope.called_numbers.length; i++){
        angular.extend(temp_called_numbers, rating);
    }
}

Answer 2

<tr ng-repeat="number in called_numbers">
<td>             
    <div ng-if="number.name != null">
        <span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
            <input type="radio" name="rating" ng-model="number.checked"><i></i>
            <input type="radio" name="rating" ng-model="number.checked"><i></i>
            <input type="radio" name="rating" ng-model="number.checked"><i></i>
            <input type="radio" name="rating" ng-model="number.checked"><i></i>
        </span>
    </div>
</td>  
</tr>

//访问所选项目

angular.forEach($scope.called_numbers, function(value, index) {
        if (value.checked) {
              $scope.called_numbers[index].checked = isSelectAll;
        }
});

Answer 3

对于那些检查此线程的人。我已经弄清楚这里的问题不在于保存到数组部分，但问题是在代码的HTML端。

此外，这是星星上的视觉错误，阵列很好，它在点击时存储数据。单击单组单选按钮组中的单选按钮时，我没有获得正确数据的原因是因为我在单选按钮上使用<span></span>作为包装器。

发生了什么事，即使我通过ng-repeat获得了2组或更多组单选按钮，该页面只接受1个单选按钮输入。

将包装器更改为<form></form>：

<form class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
        <input type="radio" name="rating" ng-model="number.checked"><i></i>
        <input type="radio" name="rating" ng-model="number.checked"><i></i>
        <input type="radio" name="rating" ng-model="number.checked"><i></i>
        <input type="radio" name="rating" ng-model="number.checked"><i></i>
    </form>

我现在可以从每组单选按钮组中获得2个或更多不同的输入。

Radio Buttons在Angular JS中没有保存正确的值

3 个答案: