Setting dynamic ng-model names in AngularJS

Question

There are similar questions here and here, although my use-case is a little different.

I have an object called uniqueLists which looks like this:

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

I'm trying to build a search function out of this list. Currently, I can display all the list items in checkboxes on the page like this (the following code uses Jade templating engine for Node/ExpressJS, it's easy enough to understand even if you're not familiar with it. Indent == child node of the line above it)

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

The only part I'm having issues with is the ng-model of my form and checkboxes. I want the form's ng-model == {{key}}. I've tried setting that but it breaks Angular. I've also tried ng-model='uniqueLists[index][0]' but, again, Angular doesn't parse this and just makes every form's model the string uniqueLists[index][0].

Same deal with the input checkboxes, I want their ng-model="{{value}}". Is there a way to do this in my controller perhaps? I can't think of anything that will work inside of ng-repeat.

A small note to anyone who stumbles on this question

As you'll see in the answer/fiddle below, when you refer to object/positions in an ng-model they aren't rendered into their correct names in the DOM, but they seem to work with Angular as though they are.

For instance, in the above code, setting ng-model="uniqueLists[key][val]" renders in the DOM as ng-model="uniqueLists[key][val]", but behaves as though it's ng-model="uniqueLists[name][string1]".

Seems to be a bizarre quirk of Angular, this tripped me up because I was checking the ng-model names in my browser before hooking it up to my controller, and when I saw it wasn't parsing the object for the correct values I assumed it wasn't working.

Answer 1

I'm still not totally sure I understood all your problem, but I'll still give you this code : http://jsfiddle.net/DotDotDot/7AU6A/1/

To explain a bit, I used a slightly modified data sample (in order to have unique strings), and instead of creating a model simply equal to a defined {{value}} I've put all the models in an object, so you can easily go to object[key][value] (in your case it would be something like object['name']['string1']) and I associated those values to the checkboxes. The only thing I had to do is to create it from the data sample object, so it forces the controller to parse all the data once.

It's quite siple when you see it in action (the values are displayed at the bottom of the fiddle). Let's say you click on the checkbox name=> string2, the value of object['name']['string2'] will correspond to the state of the checkbox, which will be automatically watched by the ng-model.

When you have this, it's quite easy to modify each checkbox with your controller, so I added a little search function in order to show it in action, you can search a list of words separated with a space in the search box, then clicking on search will check the matching checkboxes

On the HTML side it's not a big modification (sorry I'm not familiar with your templates, it will be straight 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>

And on the controller side, this is how I initialize the models :

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

The last part, the search function is only made of loops to iterate all the search/model values, I think this is what you will have to modify in order to match your own search controller

Is that what you wanted ?

Answer 2

@DotDotDot

I am faced with the same pb with _dynamic_names_, and fully understand the author of Q. With you example almost everything works fine EXCEPT (!) submitting. Please take a look into attached Screenshot.

With this example the ng-model have to be dynamic, like: selectedData_A_1, selectedData_B_2, selectedData_C_3, e.t.c ...

...only then, in case of using the HTML-Form-Submit will be able to decode the value of checkbox in relation with the name.