单选按钮未在 Angular JS 中保存正确的值

Posted 2023-05-07

【中文标题】单选按钮未在 Angular JS 中保存正确的值

【英文标题】：Radio Buttons not saving correct value in Angular JS

【发布时间】：2015-05-11 09:41:53

【问题描述】：

在尝试修复我的代码并在网上搜索任何解决方案后，我终于放弃了，想请教各位。

我正在处理多组单选按钮并将它们转换为星级：

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 星。

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

【问题讨论】：

我会使用 angulat.extend 来保留原始属性并向对象添加新属性，而不是推送（这将更改存储的值）。文档：docs.angularjs.org/api/ng/function/angular.extend

哇，看来扩展功能是对的。但会测试一下。谢谢@Jax700303

为了清晰起见将我的评论弹出到答案中

【参考方案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);
    

【参考方案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;
        
);

【参考方案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 个或更多不同的输入。