How to identify form inputs in mutli forms page with AngularJS

Question

I have got a page with some forms with diffirent types of inputs.

My form are function of a list of events.

<div class="event-group" ng-repeat="event in events">

        <b>Event {{ event.id }} </b>

            <fieldset>

                <!-- Title -->
                    <label>Title : </label>
                    <input type="text" name="event.title" class="form-control" ng-model="event.title"  required >

                <!-- Month -->
                    <label>Month</label>
                    <input type="text" name="event.month" class="form-control" ng-model="event.mois" required>

                <!-- Date -->
                    <label>Date</label>
                    <input type="text" name="event.date" class="form-control" ng-model="event.date"  required >

                <!-- Hour -->
                    <label>hour</label>
                    <input type="text" name="event.hour" class="form-control" ng-model="event.hour"  required>

                <!-- Description -->
                <div id="description-group" class="form-group">
                    <label>Description</label>
                    <textarea type="text" name="description" class="form-control" ng-model="event.description" required></textarea>
                </div>

            </fieldset>

            <input type="button" class="btn btn-into btn-lg btn-right"  value="Edit"></input>


</div>

The problem is about how to disable or enable one form. I want to let the oportunity to the user to enable inputs in one form, change one value and finally update changes.

To sum up, I have got a list of forms and I want my "Edit" button to enable inpus from only one form. I have got one edit button per form.

I would like to do the same to hide/show some buttons about saving/deleting when the user chose to edit on form.

How can I identify each input or each button from different forms ?

Answer 1

Here is the answer :

<div id="result">
        <div class="event-group" ng-repeat="event in events">
        <hr />
        <b>Evenement {{ event.id }} </b>
            <button class="btn btn-default" ng-click="isEditModeEnabled = !isEditModeEnabled">Edit</button>
            <fieldset ng-disabled="!isEditModeEnabled">
                    <label>Title : </label>
                    <input type="text" name="event.title" class="form-control" ng-model="event.titre"  required > <!-- OR disabled="disabled" -->
                    <!--<span class="help-block"></span>-->

                <!-- Month -->
                    <label>Month</label>
                    <input type="text" name="event.month" class="form-control" ng-model="event.month" required>

                <!-- Date -->
                    <label>Date</label>
                    <input type="text" name="event.date" class="form-control" ng-model="event.date"  required >

                <!-- Hour -->
                    <label>Heure</label>
                    <input type="text" name="event.hour" class="form-control" ng-model="event.heure"  required>

                <!-- Description -->
                <div id="description-group" class="form-group">
                    <label>Description</label>
                    <textarea type="text" name="description" class="form-control" ng-model="event.description" required></textarea>
                </div>

            </fieldset>

            <div collapse="!isEditModeEnabled">
                    <input type="button" class="btn btn-into btn-lg btn-right"  value="Save" ng-click="updateThis(event.id,event.title,event.month,event.date,event.hour,event.description)"></input>
                    <input type="button" class="btn btn-into btn-lg btn-right"  value="Delete" ng-click="deleteThis(event.id)"></input>
            </div>

            <hr />

        </div>
    </div>

I tought that we had to change the variable name isEditModeEnabled to avoid overlaps between different forms.