angularJS inline editor for multiple 'fields'

Question

The following code-snippet enables me to edit the elements on a page, however, clicking on the P tags all the others change into inline-editor mode as well. How can I rework this script, such that it only enables the editor for the P tag clicked?

JS code:

function Profile($scope) {
  $scope.person = {
    name : "Test Name",
    company : "Test",
    role : "Test Role"
  };

}

function Editor($scope) {
  $scope.editorEnabled = false;
  $scope.enableEditor = function() {
    $scope.editorEnabled = true;
    $scope.name = $scope.person.name;
    $scope.company = $scope.person.company;
    $scope.role = $scope.person.role;
  },

  $scope.disableEditor = function() {
    $scope.editorEnabled = false;
  },

  $scope.save = function() {
    $scope.person.name = $scope.name; //var = input.value
    $scope.person.company = $scope.company;
    $scope.person.role = $scope.role;
    $scope.disableEditor();
  }
}

HTML:

<div ng-controller="Profile">
    <div ng-controller="Editor">
        <h1 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.name}}</h1>
        <span ng:show="editorEnabled">
            <form class="form-inline">
                <input type="text" size="30" name="name" ng:required ng-model="name">
                <button class="btn btn-success"  ng:click="save()">Ok</button>
                <button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
            </form>
        </span>
        <h5 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.role}} @ {{person.company}}</h5>
        <span ng:show="editorEnabled">
            <form class="form-inline">
                <input type="text" size="30" name="role" ng:required ng-model="role"> @ <input type="text" size="30" name="company" ng:required ng-model="company">
                <button class="btn btn-success"  ng:click="save()">Ok</button>
                <button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
            </form>
        </span>
    </div>
</div>

Just going to throw this out there, if you like it, use it, if not throw it on back. Use a directive. — Tim Withers
– Tim Withers, Commented May 7, 2013 at 1:26
Having worked with AngularJS for ... about an hour ... I think that's way over my head atm :) I had a look and in all fairness I understand about 25% of what directives are about. Any other options for the time being? — Tamas
– Tamas, Commented May 7, 2013 at 1:31

tnajdek · Accepted Answer · 2013-05-20 11:34:08Z

1

The way I would most likely approach it would be to introduce new field into $scope that identifies which field is editable. Then your ngShow directive would contain an expression, something along these lines:

<span ng:show="editable == 'company'">

Your ngClick directive would look something like this:

<h1 ng:click="editor = 'company'">

Your cancel button would set this to null and your enable/disable editor functions would be gone. Bear in mind all this is top of my head, hopefully it points you in the right direction. I'll improve this answer if I get a chance.

edited May 20, 2013 at 11:34

answered May 7, 2013 at 18:18

tnajdek

5426 silver badges14 bronze badges

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

2 Comments

Tamas Over a year ago

It did send me to the right direction:<h1 class="center" ng-click="editable = 'name'" ng-hide="editable == 'name'">{{person.name}}</h1><span ng-show="editable == 'name'">

Tamas Over a year ago

I do have one more question though, is there a difference between "ng:click" and "ng-click" (note the : and -). thank you!! :)

Collectives™ on Stack Overflow

angularJS inline editor for multiple 'fields'

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related