Установка имен динамических ng-моделей в AngularJS

Здесь есть похожие вопросы и , хотя мой прецедент немного отличается.

У меня есть объект с именем 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, это достаточно легко понять, даже если вы не знакомы с ним. Отступ == ребенок node строки над ним)

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 в моем браузере, прежде чем подключить его к моему контроллеру, и когда увидел, что он не разбирает объект для правильные значения Я предположил, что он не работает.

ОТВЕТЫ

Ответ 1

Я все еще не совсем уверен, что понял всю вашу проблему, но я все равно дам вам этот код: http://jsfiddle.net/DotDotDot/7AU6A/1/

Чтобы немного объяснить, я использовал слегка измененный образец данных (чтобы иметь уникальные строки), и вместо того, чтобы создавать модель, просто равную определенному {{value}}, я поместил все модели в объект, поэтому вы можете легко перейти к объекту [key] [value] (в вашем случае это будет что-то вроде объекта ['name'] ['string1']), и я привязал эти значения к флажкам. Единственное, что мне нужно было сделать, это создать его из объекта образца данных, поэтому он заставит контроллер разобрать все данные один раз.

Это довольно много, если вы видите его в действии (значения отображаются внизу скрипта). Скажем, вы нажмете флажок name= > string2, значение объекта ['name'] ['string2'] будет соответствовать состоянию флажка, который будет автоматически просматриваться ng-моделью.

Если у вас есть это, достаточно легко изменить каждый флажок с вашим контроллером, поэтому я добавил небольшую функцию поиска, чтобы показать ее в действии, вы можете искать список слов, разделенных пробелом в поле поиска, то нажатие на поиск проверит соответствующие флажки

На стороне 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;
     }
}

Последняя часть, функция поиска производится только из циклов для итерации всех значений поиска/модели, я думаю, что это то, что вам нужно будет изменить, чтобы соответствовать вашему собственному поисковому контроллеру.

Это то, что вы хотели?

Ответ 2

@DotDotDot

Я столкнулся с одним и тем же pb с _dynamic_names_ и полностью понимаю автора Q. С вами пример почти все работает отлично EXCEPT (!), отправляя. Пожалуйста, взгляните на прилагаемый скриншот.

В этом примере ng-model должны быть динамическими, например: selectedData_A_1, selectedData_B_2, selectedData_C_3, e.t.c...

... только тогда, в случае использования HTML-Form-Submit будет возможность декодировать значение флажка в зависимости от имени.

enter image description here