title: Edit object inside array - AngularJS
body: <p><a href="http://jsfiddle.net/cnnMQ/2/" rel="nofollow">http://jsfiddle.net/cnnMQ/2/</a></p>
  
  <p>You can see here I have a pretty nice functioning Add/Remove/Edit functionality for removing objects from an array. </p>
  
  <p>What I am struggling with is</p>
  
  <ol>
  <li><p>Editing inline and pushing the changes back into the array. </p></li>
  <li><p>Adding new input fields to the DOM in order to push new objects into the array. </p></li>
  </ol>
  
  <p><a href="http://jsfiddle.net/cnnMQ/2/" rel="nofollow">http://jsfiddle.net/cnnMQ/2/</a></p>
  
  <pre><code>app = angular.module("sparta", []);
  
  window.CompetitionController = function($scope) {
  
       $scope.activities = [{
          id: 6431,
          name: "Meeting",
          points: 20
      }, {
          id: 6432,
          name: "Deal",
          points: 100
      }];
  
      $scope.addNewActivity = function() {
  
          //This function should create 2 new input fields
          //The user should input the name and points
          //We can ignore the id for now
          //Then the object should be craeted and pushed in as you see below with the mock data.
  
          var updatedActivities = {
                  id: 6433,
                  name: "Call",
                  points: 5
              };
  
              $scope.activities.push(updatedActivities);
      }
  
      $scope.editActivity = function(activity) {
          var selectedActivity = activity;
          console.log(selectedActivity);
      }
  
      $scope.removeActivity = function(activity) {
          activityId = activity.id; //the activity id
  
          var i = 0;
          for (var item in $scope.activities) {
              if ($scope.activities[item].id == activityId)
                  break;
              i++;
          }
  
          $scope.activities.splice(i, 1);
      }
  
  }
  </code></pre>
  
  <p>The HTML is as follows:</p>
  
  <pre><code>&lt;body ng-app="sparta"&gt;
      &lt;div class="container" ng-controller="CompetitionController"&gt;
          &lt;div ng-repeat="activity in activities"&gt;
              {{activity.name}} - {{activity.points}} 
                  &lt;button ng-click="editActivity(activity)"&gt;Edit&lt;/button&gt;
                  &lt;button ng-click="removeActivity(activity)"&gt;Remove&lt;/button&gt;
          &lt;/div&gt;      
      &lt;div class="addNew"&gt;
          &lt;button ng-click="addNewActivity()"&gt;Add New&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I've tried to give as much as possible in the fiddle - what I would love is some guidance on the addNewActivity() function and the editActivity() function and how to inline edit the two input fields and save the changes back into the array.</p>
  
  <p>Thanks in advance! </p>