How to deal with default values of input fields in a table in Angular?

Question

I want to automatically set the slugInput and versionInput inputs to different values for a table of things. How can I do this from a data structure?

Here's my view:

<div ng-controller="FileListController as flc">
    <h1>Files Available</h1>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>File Name</th>
                <th>Slug</th>
                <th>Version</th>
                <th></th>
            </tr>
        </thead>
        <tr ng-repeat="file in files">
            <td>{{file}}</td>
            <td><input type="text" class="form-control" ng-model="slugInput"></td>
            <td><input type="text" class="form-control" ng-model="versionInput"></td>
            <td><button type="button" ng-click="packageMod(file, slugInput, versionInput)" class="fa fa-check btn btn-success"></button></td>
        </tr>
    </table>
</div>

Could you clarify your question? I'm not sure what you mean by "it's not possible to have multiple elements with a model that have different values"... — sfletche
– sfletche, Commented Jun 7, 2015 at 2:32
Are you looking for: <input type="text" class="form-control" ng-model="slugInput" value="{angularvariable}">? — Grallen
– Grallen, Commented Jun 7, 2015 at 2:55
give an example with values of what you are trying to achieve. It's not clear to me either what you want to accomplish — rcheuk
– rcheuk, Commented Jun 7, 2015 at 2:55
@Grallen that works? News to me, I thought the value attribute didn't work. — Yet Another User
– Yet Another User, Commented Jun 7, 2015 at 4:07

Andy Gaskell · Accepted Answer · 2015-06-07 05:18:54Z

2

A couple small changes:

<tr ng-repeat="file in files">
    <td>{{file}}</td>
    <td><input type="text" class="form-control" ng-model="file.slugInput"></td>
    <td><input type="text" class="form-control" ng-model="file.versionInput"></td>
    <td><button type="button" ng-click="packageMod(file)" class="fa fa-check btn btn-success"></button></td>
</tr>

I changed the arguments to packageMod. You can access the values in packageMod with file.slugInput and file.versionInput. If you need to set default values ahead of time, loop through your files and set the values accordingly.

answered Jun 7, 2015 at 5:18

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

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

1 Comment

Yet Another User Over a year ago

I knew I was missing something. Thanks for pointing out the object route.

Collectives™ on Stack Overflow

How to deal with default values of input fields in a table in Angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related