AngularJS-使用ng repeat构建的单选按钮的设置值

AngularJS - Setting value of radio button built using ng-repeat

本文关键字：单选按钮 设置 构建 使用 ng repeat AngularJS-      更新时间：2023-09-26

这是HTML:

<div>
    <ul>
        <li ng-repeat="answerswer in answers">
            <input type="radio" ng-model="$parent.selectedAnswer" name="answerswerText" value="{{answer.answerID}}"/>
            <label>{{answer.answerText}}            
            </label>
        </li>
    </ul>
</div>

需要将所选答案存储到LocalStorage中，每当问题再次出现时，标记该答案对应的单选按钮。我可以将它存储在LocalStorage中，检索它，但当我更新模型时，它不会选择UI上的单选按钮。

在我的控制器中，我只是简单地调用-

$scope.selectedAnswer = value.answerID;

其中值指向存储在CCD_ 3中的答案。请帮忙。

编辑：

更多细节：

我使用一个路由和控制器来管理整个测验页面。当一个问题完成后，我获取下一个问题及其相应的答案。在控制器（$scope.answers）中填充answers数组时，我正在检查它们的ID是否与存储在LocalStorage中的答案相匹配。在每个问题之间，answers数组被清空并再次填充。

因此应该使用ng-value来执行此操作，因为它是一个角度表达式，而不是文本值。像你在Plnkr工作时那样只使用价值，但我知道有时不会。

此外，总的来说，我发现在大多数情况下使用ng-controller="<ControllerName> as <ThisRef>"效果要好得多。有时您仍然需要$scope变量（如表单验证），但通常情况下，在$scope上使用控制器"this"变量时，作用域问题较少。

我用我描述的方法做了一个例子：

http://plnkr.co/edit/XV3we6SDmmLmUGSwdVVT?p=preview

如果你的问题与HTML5本地存储有关，请告诉我，我不确定

编辑：或者，您可以尝试使用$scope.$apply();来完成此操作。如果作用域与视图不同步，则应用程序应修复此问题。

这是另一个plnkr，展示了我通常是如何做这样的事情的。请注意，$apply在该示例中是100%不需要的，但在您的示例中可能需要。

这是我的例子：

    $scope.updateModel = function(value) {
      $timeout(function() {
        $scope.$apply(function() {
          $scope.selectedAnswer = value;
        });
      });
    };

请注意，我使用$timeout来确保在进行摘要时不会发生这种情况。

http://plnkr.co/edit/O7CBfTiWPrsbthFKlAOZ?p=preview

我希望这个编辑有帮助=）

由于只有一个控制器，因此不需要指定$parent。

<div>
    <ul>
        <li ng-repeat="answerswer in answers">
            <input type="radio" ng-model="selectedAnswer" name="answerswerText" value="{{answer.answerID}}"/>
            <label>{{answer.answerText}}            
            </label>
        </li>
    </ul>
</div>
相关文章：