在AngularJS中設置動態ng模型名稱

Question

這里和這里有類似的問題，雖然我的用例有點不同。

我有一個名為uniqueLists的對象，如下所示：

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

我正在嘗試從此列表中構建搜索功能。 目前，我可以在頁面上的復選框中顯示所有列表項（下面的代碼使用Node / ExpressJS的Jade模板引擎，即使你不熟悉它也很容易理解.Netnt ==子節點它上面的一行）

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}}" 。 有沒有辦法在我的控制器中執行此操作？ 我想不出任何可以在ng-repeat起作用的東西。

任何偶然發現這個問題的人的小記

正如您在下面的答案/小提示中所看到的，當您在ng-model引用對象/位置時，它們不會在DOM中呈現為正確的名稱，但它們似乎與Angular一起使用，就像它們一樣。

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

似乎是一個奇怪的Angular怪癖，這讓我感到高興，因為我在瀏覽器中檢查了ng-model名稱，然后將它連接到我的控制器上，當我看到它沒有解析對象的正確值時，我假設它不起作用。

Answer 1

我仍然不完全確定我理解你的所有問題，但我仍然會給你這個代碼： http ： //jsfiddle.net/DotDotDot/7AU6A/1/

為了解釋一下，我使用了一個稍微修改過的數據樣本（為了擁有唯一的字符串），而不是創建一個簡單等於定義的{{value}}的模型，我將所有模型放在一個對象中，所以你可以很容易地轉到object [key] [value]（在你的情況下它會像object ['name'] ['string1']）並且我將這些值與復選框相關聯。 我唯一要做的就是從數據樣本對象創建它，因此它強制控制器解析所有數據一次。

當你看到它在行動時它是相當的siple（值顯示在小提琴的底部）。 假設您單擊復選框name => 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模型必須是動態的，例如：selectedData_A_1，selectedData_B_2，selectedData_C_3等......

...只有這樣，在使用HTML-Form-Submit的情況下，才能解碼與名稱相關的復選框值。