javascript - 在 AngularJS 中设置动态 ng-model 名称

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 Node/ExpressJS 模板引擎，即使您也很容易理解不熟悉吧。Indent == 上面一行的子节点)

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 的 ng-model == {{key}}。我试过设置它，但它破坏了 Angular。我也尝试过 ng-model='uniqueLists[index][0]' 但是，同样，Angular 不会解析它，只是将每个表单的模型设为字符串 uniqueLists[index] [0]。

同样处理 input 复选框，我想要它们的 ng-model="{{value}}"。有没有办法在我的 Controller 中执行此操作？我想不出任何可以在 ng-repeat 中运行的东西。

给任何遇到这个问题的人的小提示

正如您将在下面的答案/ fiddle 中看到的，当您在 ng-model 中引用对象/位置时，它们不会呈现为正确的名称在 DOM 中，但它们似乎与 Angular 一起工作，就好像它们一样。

例如，在上面的代码中，设置 ng-model="uniqueLists[key][val]" 在 DOM 中呈现为 ng-model="uniqueLists[key][ val]"，但表现得好像它是 ng-model="uniqueLists[name][string1]"。

这似乎是 Angular 的一个奇怪的怪癖，这让我很困惑，因为我在将它连接到我的 Controller 之前检查了浏览器中的 ng-model 名称，当我看到它不是' t 为正确的值解析对象我认为它不起作用。

Answer 1

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

为了解释一下，我使用了一个稍微修改过的数据样本(为了拥有唯一的字符串)，而不是创建一个简单地等于定义的 {{value}} 的模型，我将所有模型放在一个对象中，因此您可以轻松转到对象[键][值](在您的情况下，它类似于对象['name']['string1'])，我将这些值关联到复选框。我唯一需要做的就是从数据样本对象创建它，这样它会强制 Controller 一次解析所有数据。

当您看到它在运行时，它非常简单(值显示在 fiddle 的底部)。假设您点击复选框名称=> string2，object['name']['string2'] 的值将对应于复选框的状态，这将由 ng-model 自动监视。

有了这个之后，用你的 Controller 修改每个复选框就很容易了，所以我添加了一点搜索功能来展示它的实际效果，你可以在搜索框中搜索用空格分隔的单词列表，然后单击搜索将选中匹配的复选框

在 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>

在 Controller 方面，这是我初始化模型的方式:

$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;
     }
}

最后一部分，搜索功能仅由循环组成以迭代所有搜索/模型值，我认为这是您必须修改的部分，以匹配您自己的搜索 Controller

这是你想要的吗？