6

I have a Model that takes an object that could contain any set of properties.

I am wondering if I can bind to each object property, without knowing the property values ahead of time.

Take this for example

var object1 = 
{
    Name: '1',
    Identifier: '12345',
    Password: 'password'
}

var object2  =
{
    Name: '2',
    Identifier: 'object_two'
}

var objects = [object1,object2];

My objects can have different and unique properties, and I'd like to bind this to a form.

I know I can use a for (var property in object) and iterate through each object -- But can I do the same thing with AngularJS binding?

I wanted to do something along the lines of:

<ul><li ng-repeat="attrib in obj">
                {{attrib}}
            </li</ul>

Edit: Thanks to the answer below I have gotten a little further. I can't seem to achieve two-way binding with this. This fiddle illustrates what I am trying to do:

http://jsfiddle.net/EpqMc/17/

I essentially want to bind using something like this:

<p ng-repeat="(key,value) in obj">                    
                    {{key}} : <input ng-model="obj[key]" />

                </p>

This works, except that I can only enter one character at a time -- interesting.

Final Edit: I found an acceptable alternative in case anyone else has this problem. I wasn't able to bind directly to an object without some issues, but i WAS able to bind to an array like the docs state in the answer below.

The following fiddle accomplishes what I need to do, while being only slightly more verbose.

http://jsfiddle.net/8ENnx/9/

function ctrl($scope) {
    $scope.objects =
                [
                [
                    {Name: 'Name:', Value: 'Joe'},
                    {Name: 'Identification', Value: '1'},
                    {Name: 'Password', Value: 'secret'}
                ],
                    [
                    {Name: 'Name:', Value: 'Jane'},
                    {Name: 'Identification', Value: '2'},
                    {Name: 'Weather', Value: 'Sunny'}
                ]
                ];

//    $scope.setSelected = ?????;

}

<div ng-app>
    <div ng-controller="ctrl">
        Objects
        <ul>
              <br/>
                Listing of properties:
                <br/>

            <li ng-repeat="obj in objects" class="swatch">                               
                {{obj}}
                <p ng-repeat="prop in obj">
                    {{prop.Name}}: <input ng-model="prop.Value" /></p>


            </li>
        </ul>

    </div>
</div>

This allows me to define an arbitrary set of arguments, but still bind without issues using angular.

Yablargo
  • 3,520
  • 7
  • 37
  • 58

1 Answers1

10

No problem:

<li ng-repeat='(key, value) in obj'>
    {{key}} : {{value}}
</li>

It's in the docs as well: http://docs.angularjs.org/api/ng.directive:ngRepeat

tymeJV
  • 103,943
  • 14
  • 161
  • 157
  • Awesome! Thanks and shame on me for not checking the docs first! – Yablargo Sep 25 '13 at 18:58
  • 1
    @Yablargo -- With Angular, the docs can be a complete hit or miss :) – tymeJV Sep 25 '13 at 18:59
  • I put that much into a fiddle -- but these seem to be read-only, is that normal? I was hoping to be able to edit these. I posted the fiddle in my main question. When I try to do something like obj.{{key}} this doesn't parse right , and binding to {{value}} results in a read-only box. – Yablargo Sep 25 '13 at 19:08
  • 1
    You should be able to bind to a model (I haven't tried this, so bare with me), inside your repeater, set the model like `ng-model='value'`, no need for `{{}}` since you're writing in Angular. – tymeJV Sep 25 '13 at 19:10
  • @Yablargo -- See above comment, also, I don't see the fiddle above? – tymeJV Sep 25 '13 at 19:11
  • 1
    @Yablargo -- Yup, that did it: http://jsfiddle.net/tymeJV/EpqMc/12/ -- Just had the bind messed up :) – tymeJV Sep 25 '13 at 19:12
  • That fiddle seems the closest thus-far, but my boxes are read-only at least in Firefox. I may be SOL here, thats why I was trying some creative way to bind to object.keyname – Yablargo Sep 25 '13 at 19:16
  • @Yablargo -- Hmmm same here (Chrome), that, I haven't seen. But, here's a post explaining why that is: http://stackoverflow.com/questions/15488342/binding-inputs-to-an-array-of-primitives-using-ngrepeat-uneditable-inputs – tymeJV Sep 25 '13 at 19:19
  • 2
    try `` instead of ``, perhaps? – John Ledbetter Sep 25 '13 at 19:37
  • John's comment got it closer -- I can input data but only one character at a time -- the box loses focus/re renders. – Yablargo Sep 25 '13 at 20:32
  • 1
    @Yablargo -- Awesome...I bookmarked your fiddle, this'll probably help me in an upcoming proj! – tymeJV Sep 25 '13 at 21:05