Question

类似的问题here和here，虽然我的用例有点不同。

我有一个名为uniqueLists的对象，如下所示：

$scope.uniqueLists - {
    name: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ],
    Category: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ],
    designer: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ]
}

我正在尝试从此列表中构建搜索功能。目前，我可以在页面上的复选框中显示所有列表项，如 （以下代码使用Jade节点/ ExpressJS的模板引擎，即使您不是，也很容易理解熟悉它。上面的行的缩进==子节点）

div(class="searchNav")
    p(ng-repeat="param in searchParams") {{param[0] + ' = ' + param[1]}}

    div.row-fluid(ng-repeat="(key,val) in uniqueLists")
        form(ng-model="???") {{key}}
            label.checkbox(ng-repeat="value in val")
                input(type="checkbox", ng-model="?????") 
                {{value}}

我遇到问题的唯一部分是我的表单和复选框ng-model。我想要form的{{1}}。我已经尝试过设置但是它打破了Angular。我也试过了ng-model == {{key}}但是，Angular并没有解析它，只是让每个表单的模型成为字符串ng-model='uniqueLists[index][0]'。

同样处理uniqueLists[index][0]复选框，我想要他们的input。有没有办法在我的控制器中执行此操作？我想不出任何可以在ng-model="{{value}}"内部起作用的东西。

任何偶然发现此问题的人的小记录

正如您在下面的答案/小提示中看到的那样，当您在ng-repeat中引用对象/位置时，他们不会在DOM中正确显示它们，但是他们似乎和Angular合作就像他们一样。

例如，在上面的代码中，将ng-model设置为DOM中的ng-model="uniqueLists[key][val]"，但行为就好像是ng-model="uniqueLists[key][val]"。

似乎是一个奇怪的Angular怪癖，这让我感到高兴，因为我在浏览器中检查了ng-model="uniqueLists[name][string1]"名称，然后将它连接到我的控制器上，当我看到它没有解析对象时正确的值，我认为它不起作用。

Answer 1

我仍然不完全确定我理解你的所有问题，但我仍然会给你这个代码：http://jsfiddle.net/DotDotDot/7AU6A/1/

为了解释一下，我使用了一个稍微修改过的数据样本（为了拥有唯一的字符串），而不是创建一个简单等于定义的{{value}}的模型，我将所有模型放在一个对象中，所以你可以很容易地去对象[key] [value]（在你的情况下它会像object ['name'] ['string1']）并且我将这些值与复选框相关联。我唯一要做的就是从数据样本对象创建它，因此它强制控制器解析所有数据一次。

当你看到它在行动中时，这是非常小的（价值显示在小提琴的底部）。假设你点击复选框name =＆gt; string2，object ['name'] ['string2']的值将对应于复选框的状态，该模型将由ng-model自动监视。

如果你有这个，用你的控制器修改每个复选框很容易，所以我添加了一个小搜索功能，以便显示它的实际效果，你可以搜索在搜索框中用空格分隔的单词列表，然后点击搜索将检查匹配的复选框

在HTML方面，这不是一个很大的修改（抱歉，我不熟悉你的模板，它将是直接的HTML）

    <div ng-repeat='(key,val) in uniqueLists'>
       <form name='{{key}}'>
       {{key}}
            <p ng-repeat='value in val'>
                <input type='checkbox' ng-model='selectedData[key][value]' />{{value}}
            </p>
        </form>

    </div>

在控制器方面，这是我初始化模型的方式：

$scope.selectedData={};
for (var i in $scope.uniqueLists)
{
 $scope.selectedData[i]={}
     for(var j in $scope.uniqueLists[i])
     {
         $scope.selectedData[i][$scope.uniqueLists[i][j]]=false;
     }
}

最后一部分，搜索功能只是循环来迭代所有搜索/模型值，我认为这是你必须修改以匹配你自己的搜索控制器

这就是你想要的吗？

Answer 2

@DotDotDot

我面对与_dynamic_names_相同的pb，并完全理解Q的作者。以你为例，几乎所有东西都工作正常除了（！）提交。请查看随附的屏幕截图。

通过此示例， ng-model 必须是动态的，例如：selectedData_A_1，selectedData_B_2，selectedData_C_3，e.t.c ......

...只有这样，如果使用HTML-Form-Submit，将能够解码与名称相关的复选框值。

enter image description here

在AngularJS中设置动态ng模型名称

任何偶然发现此问题的人的小记录

2 个答案: