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.

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

11 Comments

@Yablargo -- With Angular, the docs can be a complete hit or miss :)
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.
@Yablargo -- Yup, that did it: jsfiddle.net/tymeJV/EpqMc/12 -- Just had the bind messed up :)
try <input ng-model="obj[key]"> instead of <input ng-model="value" />, perhaps?
@Yablargo -- Awesome...I bookmarked your fiddle, this'll probably help me in an upcoming proj!
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.