13

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

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

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

我正在尝试从此列表中构建搜索功能。目前，我可以像这样在页面上的复选框中显示所有列表项（以下代码使用JadeNode / 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的ng-model == {{key}}. 我试过设置它，但它破坏了 Angular。我也尝试过ng-model='uniqueLists[index][0]'，但是再次，Angular 不会解析它，只是将每个表单的模型都设为 string uniqueLists[index][0]。

同样处理input复选框，我想要他们的ng-model="{{value}}". 有没有办法在我的控制器中做到这一点？我想不出任何可以在ng-repeat.

给任何偶然发现这个问题的人的小提示

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

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

似乎是 Angular 的一个奇怪的怪癖，这让我大吃一惊，因为我在将ng-model浏览器连接到控制器之前检查了浏览器中的名称，当我看到它没有解析对象以获得正确的值时，我认为它不是工作。

4

2 回答 2

10

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

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

当您看到它在运行时，它非常简单（值显示在小提琴的底部）。假设您点击复选框名称=> 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;
     }
}

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

那是你想要的吗？

于 2013-07-28T15:16:20.867 回答
0

@DotDotDot

我面临着与_dynamic_names_相同的pb，并且完全理解Q的作者。在你的例子中，除了（！）提交之外，几乎一切都很好。请查看随附的屏幕截图。

在此示例中，ng-model 必须是动态的，例如：selectedData_A_1、selectedData_B_2、selectedData_C_3 等...

...只有这样，在使用 HTML-Form-Submit 的情况下，才能解码与名称相关的复选框的值。

在此处输入图像描述

于 2014-09-16T13:21:08.620 回答