Adding a new input field within ng-repeat

Question

In the fiddle above, I'm trying to let users add a new open time when they hit the new item button. The problem I'm having is that when the button is clicked, it updates both events in the ng-repeat, instead of the current event its on.

<ul>
      <li ng-repeat="event in orgEvents">
          <h3>Event ID: {{event.CampaignEventID}}</h3>
          <h2>Event Name: {{event.Name}}</h2>          
          <ul>
          <li ng-repeat="time in orgEventTimes">
              <div ng-if="time.CampaignEventID == 1">
                  Event ID: <input type="text" ng-model="time.CampaignEventID">
                  Open:  <input type="text" ng-model="time.OpenTime">
              </div>
          </li>
           <button ng-click="add(item)">New Item</button>

          </ul>
          <hr/>
      </li>
    </ul>

Also for some reason the ng-if statement is not working, and it is showing every event in the $scope.orgEventTimes array, instead of just the ones belong to this event.

Are you bound to use the same data structure of events and it't time i.e. events in a separate list and their times in a separate list, or can you change the data structure? — Shashank Agrawal
– Shashank Agrawal, Commented Jun 26, 2015 at 11:13
@ShashankAgrawal unfortunately I'm bound to the same data structure of them both being in separate lists — dave
– dave, Commented Jun 26, 2015 at 11:33

miyamoto · Accepted Answer · 2015-06-26 11:34:04Z

1

https://jsfiddle.net/3aqwng8o/

I don't know why the ng-if isn't working.. Instead of using ng-if why not use a filter?

<li ng-repeat="time in orgEventTimes|filter: {CampaignEventID:event.CampaignEventID}">

Your button to add an item is simply pushing an empty object into the orgEventTimes array. Have it push an object that includes the CampaignEventID of the event for that instance of ng-repeat loop.

   $scope.add = function (item) {
          $scope.orgEventTimes.push(item);
        };

<button ng-click="add({CampaignEventID: event.CampaignEventID})">New Item</button>

answered Jun 26, 2015 at 11:34

miyamoto

1,54010 silver badges16 bronze badges

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

1 Comment

miyamoto Over a year ago

I wouldn't expose the CampaignEventID as an input either as the input will disappear if you delete it, but still remain in the array with a blank ID, but presumably this was just for testing/development purposes.

Collectives™ on Stack Overflow

Adding a new input field within ng-repeat

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related