AngularJS

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>

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

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

$scope.selectedAnswer = value.answerID;

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

编辑：

更详细一点：

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

Answer 1

因为你只有一个控制器，你不需要指定$parent。

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

Answer 2

因此您应该使用 ng-value 来执行此操作，因为它是 angular 表达式而不是文本值。像您在 Plnkr 中所做的那样只使用价值，但我知道有时它不会。

另外，总的来说，我发现在大多数情况下使用 ng-controller="<ControllerName> as <ThisRef>" 效果更好。有时您仍然需要 $scope 变量（例如用于表单验证），但通常在 $scope.

上使用控制器 "this" 变量时，我遇到的范围界定问题较少

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

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

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

编辑： 或者，您可以尝试使用 $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

希望这次编辑对您有所帮助 =)

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

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

javascript

local-storage