CODEWITHSUNDEEP
angularjs
user2656127
user2656127

Reputation: 665

Edit object inside array - AngularJS

http://jsfiddle.net/cnnMQ/2/

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

  1. Editing inline and pushing the changes back into the array.

  2. Adding new input fields to the DOM in order to push new objects into the array.

http://jsfiddle.net/cnnMQ/2/

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!

Upvotes: 1

Views: 7730

Answers (2)

package
package

Reputation: 4801

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.

Upvotes: 1

CD..
CD..

Reputation: 74096

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/

Upvotes: 1

Related Questions