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

Question

这是 HTML:

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

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

在我的 Controller 中，我只是简单地调用 -

$scope.selectedAnswer = value.answerID;

其中 value 指向存储在 LocalStorage 中的答案。请帮忙。

<小时/>

编辑:

更多细节:

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

Answer 1

所以你应该使用ng-value执行此操作，因为它是 Angular 表达式而不是文本值。就像您在 Plnkr 中所做的那样，仅使用值，但我知道有时并非如此。

一般来说，我发现使用ng-controller="<ControllerName> as <ThisRef>"在大多数情况下效果更好。有时您仍然需要 $scope 变量(例如表单验证)，但通常在 $scope 上使用 Controller “this”变量时，我遇到的范围问题较少。

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

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

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

<小时/>

编辑:或者您可以尝试使用 $scope.$apply();来实现这一点。如果范围与 View 不同步，那么应用应该可以解决这个问题。

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

这是我的例子:

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

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

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

我希望此编辑有帮助 =)