Edit object inside array - AngularJS

Question

You can see here I have a pretty nice functioning Add/Remove/Edit functionality for removing objects from an array.

What I am struggling with is

Editing inline and pushing the changes back into the array.
Adding new input fields to the DOM in order to push new objects into the array.

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);
    }

}

The HTML is as follows:

<body ng-app="sparta">
    <div class="container" ng-controller="CompetitionController">
        <div ng-repeat="activity in activities">
            {{activity.name}} - {{activity.points}} 
                <button ng-click="editActivity(activity)">Edit</button>
                <button ng-click="removeActivity(activity)">Remove</button>
        </div>      
    <div class="addNew">
        <button ng-click="addNewActivity()">Add New</button>
    </div>
    </div>
</body>

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.

Thanks in advance!

CD.. · Accepted Answer · 2014-02-24 10:57:10Z

1

You can change your html from:

{{activity.name}} - {{activity.points}}

To:

<input type="text" ng-model="activity.name"/> - <input type="text" ng-model="activity.points"/>

So you get 2-way binding.

Working example: http://jsfiddle.net/CFx7m/

answered Feb 24, 2014 at 10:57

CD..

74.4k25 gold badges160 silver badges170 bronze badges

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

2 Comments

user2656127 Over a year ago

Hey so one small problem with this is that if I edit the points - they are inserted into the object as a string i.e. ("10") - which seems to break stuff - is there any way to insert it as an int i.e. (10) ?

CD.. Over a year ago

You can use <input type="number"...

package · Accepted Answer · 2014-02-24 11:15:30Z

1

Here's another simple example: http://jsfiddle.net/A5xZ9/2/

Basically you hide input field until activity edit button is clicked, in which case you show input field and hide text:

<div ng-show="activity.isEdited">
  <input type="text" ng-model="activity.name"/> - <input type="text" ng-model="activity.points"/>
  <button ng-click="activity.isEdited = false">Ok</button>
</div>
<div ng-hide="activity.isEdited">
  {{activity.name}} - {{activity.points}} 
  <button ng-click="activity.isEdited = true">Edit</button>
  <button ng-click="removeActivity(activity)">Remove</button>
</div>

There's a lot of improvement possible, for example editing local copy of the activity and updating original attributes only when user presses Ok, and providing Cancel button as well.

edited Feb 24, 2014 at 11:15

answered Feb 24, 2014 at 11:08

package

4,8011 gold badge28 silver badges35 bronze badges

Collectives™ on Stack Overflow

Edit object inside array - AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related