Question

我面临的问题，如代码中所述，我似乎无法找到如何将第二个复选框（使用ng-repeat创建）绑定到某个模型，然后我可以使用进一步向下代码（显示/隐藏另一组选项）。此外，我设法使用count函数根据$scope.availableOptions中的$scope.getItterator参数显示了额外的输入数量，但现在我看不到如何访问这些值这些复选框？我知道我必须以某种方式使用选项“ng-model”，但我没有这样做，所以任何帮助表示赞赏。

我的代码是here，但我也在这里显示：

HTML：

<div ng-controller='MyCtrl'>
    Show additional options <input type="checkbox" ng-model="additionalOptions">
    <div ng-show="additionalOptions">
        <ul>
            <li ng-repeat="option in availableOptions">
                <label class="checkbox" for="opt_{{option.id}}">
                    <input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" />
                    {{option.name}}

                    <ul ng-show="if the upper checkbox is clicked">
                        <li>
                            <input type="text" ng-repeat="i in getItterator(option.count)" ng-model="SOME_VALUE_TO_BE_USED_BELOW"/>
                            Output the value based on what's entered above in the textboxes (SOME_VALUE_TO_BE_USED_BELOW)
                        </li>   
                    </ul>
                </label>
            </li>
        </ul>
    </div>
</div>

和我的js：

function MyCtrl($scope) {
    $scope.availableOptions = [{"id":"1","name":"easy","count":"2"},{"id":"2","name":"medium","count":"3"},{"id":"3","name":"hard","count":"2"}];

    $scope.getItterator=function(n){
        var a = new Array();

        for(var i=1; i <= n; i++)
            a.push(i);

        return a;       
    };

}

Answer 1

尝试ng-model="option.checked"：

<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.checked"/>

然后你可以在下面进一步访问这个属性：

<ul ng-show="option.checked">

DEMO

如果您还需要引用文本框输入。您可以在选项上创建新属性（values）。像这样：

{"id":"1","name":"easy","count":"2",values:[]}

HTML：

<div ng-repeat="i in getItterator(option.count)">
     <input type="text"  ng-model="option.values[$index]"/>
      {{option.values[$index]}}
</div>

DEMO

Answer 2

使用此：

<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.clicked"/>
    {{option.name}}

<ul ng-show="option.clicked">

基本上，您说顶部复选框应将其值存储在每个选项option.clicked的模型中。然后只显示基于范围项的信息。

更新小提琴：

http://jsfiddle.net/CkHhJ/26/

更新：

这是另一个更新的小提琴，回答你的问题第二部分：http://jsfiddle.net/CkHhJ/27/

您遇到的困难可能是因为您正在尝试构建动态输入模型。请记住，您需要使用对象作为动态值（不是普通字符串，例如：option.answers[$index].value而不只是option.answers[$index]。请参阅：AngularJS: Updating an input with a dynamic ng-model blurs on each key press

根据变量选项的数量，参考以ng为单位的ng-repeat创建的输入

2 个答案: