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中，然后检索它，但是当我更新模型时，它不会选择用户界面上的单选按钮。

在我的控制器中，我只是致电 -

$scope.selectedAnswer = value.answerID;

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

编辑：

更多细节：

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

Answer 1

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

总的来说，我发现在大多数情况下使用ng-controller="<ControllerName> as <ThisRef>"的效果要好得多。有时候你仍然需要$ scope变量（比如表单验证），但通常我在使用控制器时会遇到更少的范围问题＆＃34;这个＆＃34; $ scope范围内的变量。

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

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

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

修改或者，您可以尝试使用$scope.$apply();来完成此操作。如果范围与视图不同步，那么apply应该修复它。

这是另一个plnkr，显示我通常会做那样的事情。请注意，在该示例中，$ apply不需要100％，但您的需要可能需要。

以下是我的例子：

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

注意我正在使用$ timeout来确保在正在进行摘要时它不会发生。

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

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

Answer 2

由于您只有一个控制器，因此您无需指定$ 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>

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

2 个答案: