0

编辑：对于那些不想通过代码的人，我基本上是通过 node.selectedAnswer = "4,1,4" 或类似字符串的形式传递一个“节点”对象。该表单具有单选按钮，其中一个按钮的值为“4,1,4”。单选按钮也有 ng-checked="node.selectedAnswer" 表达式。但这不起作用。我确定 node.selectedAnswer 具有适当的值。

我有一系列单选按钮问题要问用户。我希望他们能够上一个和下一个。我正在使用堆栈来存储从 ajax 调用中检索到的数据，以及当他们选择一个选项并单击下一步时的 selectedAnswer。我已经对代码本身进行了注释，以解释我可以解释的情况。一切似乎都在工作，除了 ng-checked 只是没有选择 node.selectedAnswer，即使我可以正确地将 {{node.selectedAnswer}} 输出到页面。

    <div class="container-fluid" ng-app="AccountRequest" ng-controller="GameNode" ng-init="outside={}">
    <div class="row-fluid">
        <div class="span2"></div>
        <div class="span10">
            <form>
                <!-- node.selectedAnswer displays the selectedAnswer correctly when clicking previous and going back.
                    However, ng-checked is somehow not selecting the appropriate radio button. -->
                <span>{{node.Question.Text}} selected answer: {{node.selectedAnswer}}</span>
                <div class="radio" ng-repeat="answer in node.Answers">
                    <input type="radio" id="answerGroup" name="answerGroup" ng-checked="node.selectedAnswer" ng-model="outside.selectedAnswer" 
                           value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> {{answer.Text}} 
                </div>
                <div>
                    <input type="button" ng-click="previous()" value="Previous"/>
                    <input type="button" ng-click="next(outside.selectedAnswer)" value="Next"/>
                </div>
            </form>
        </div>
    </div>
</div>

//下面是脚本

    app.controller('GameNode', function ($scope, $http) {
    var nodes = [];

    function load(branchId, leafId, answerId) {
        $http.get("/AccountRequest/GetNode?branchId=" + branchId +
            "&leafId=" + leafId +
            "&answerId=" + answerId)
            .success(function (data) {
                //get data and push it in the stack
                nodes.push(data);
                $scope.node = data;
            });
    }

    function populateValues(selectedAnswer) {
        var answer = null;

        if (selectedAnswer === undefined || selectedAnswer == null)
            selectedAnswer = "0,0,0";

        //when next is clicked, retrieve the selectedAnswer from form and store it in current node as a property.
        if (nodes.length > 0) {
            var curNode = nodes.pop();
            curNode.selectedAnswer = selectedAnswer;
            nodes.push(curNode);
        }

        answer = selectedAnswer.split(','); 

        if (answer != null) {
            load(answer[0], answer[1], answer[2]);    
        }
    }

    $scope.next = populateValues;
    $scope.previous = function () {
        //when previous is clicked, pop the current node out and throw it away.
        //then pop the previous node out, read it, and push it back in as current node.
        if (nodes.length > 1) {
            nodes.pop();
            var prevNode = nodes.pop();
            nodes.push(prevNode);
            $scope.node = prevNode;
        }
    };
    populateValues();
});
4

1 回答 1

4

较旧的答案 - 这有效，（被标记为正确）但$parent在嵌套重复中使用可能会有点混乱。

在这种情况下，您根本不需要使用 ng-checked。由于这是一个单选组，因此选中的属性将绑定到模型。如果模型绑定到单个单选按钮的值，那么您更改“选中”哪个按钮的能力变得非常简单。

这是一个演示这个概念的plunk。

因此，在您的情况下，需要进行一些更改。
1.摆脱'id'属性 - 每个元素的ID必须是唯一的。2. 在 ng-repeat 中创建的每个项目都会创建自己的子范围。因此，要访问原始模型，必须调用“$parent”。

<input type="radio" name="answerGroup" ng-model="$parent.someAnswerAttribute" 
 value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>

在你的控制器中定义你已经做过的模型，然后修改它以绑定到一个按钮的值，在你的情况下这会有点冗长，因为你的值中有多个属性。

$scope.someAnswerAttribute = // exactly what the value of a radio button would be.

同样，上面的 plunker 反映了这个概念。希望这可以帮助！

..

..

编辑 - 更好的答案：

由于 ng-repeat 创建了它自己的子作用域，并且双向绑定是必要的，所以ng-model应该引用一个对象而不是原始的。换句话说，如果模型是$scope.myModel="Biff"，则子范围不能在不调用的情况下访问它$parent（在下面的答案中）。但是，如果模型引用对象的属性，则子对象将接收该对象的原型继承。（我想我说的没错）。

因此，使用较旧的答案示例，我们可以更改：

在父控制器中：

$scope.someAnswerAttribute = "Biff";

为此在父控制器中：

$scope.someAnswerAttribute = {value: "Biff"}

在广播组中：

<input type="radio" name="answerGroup" ng-model="someAnswerAttribue.value" 
 value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>

这个 plunk是从较旧的答案中派生出来的，并将模型演示为对象属性。

于 2013-05-25T14:54:00.783 回答