it-swarm.com.de

Bearbeiten Bearbeiten von Inhalten

Beim Benutzen ng-repeat Wie kann ich Inhalte am besten bearbeiten?

In meiner idealen Situation wäre der hinzugefügte Geburtstag ein Hyperlink. Wenn Sie auf diesen Link tippen, wird ein Bearbeitungsformular angezeigt - genau wie beim aktuellen Hinzufügen mit eine Schaltfläche zum Aktualisieren.

Live-Vorschau (Plunker)

HTML:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
    rel="stylesheet">
  </head>
<body ng-app="birthdayToDo" ng-controller="main">
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Birthday Reminders</h1>
        </div>
            <ul ng-repeat="bday in bdays">
                <li>{{bday.name}} | {{bday.date}}</li>
            </ul>

           <form ng-show="visible" ng-submit="newBirthday()">
            <label>Name:</label>
            <input type="text" ng-model="bdayname" placeholder="Name" ng-required/>
            <label>Date:</label>
            <input type="date" ng-model="bdaydate" placeholder="Date" ng-required/>
            <br/>
            <button class="btn" type="submit">Save</button>
        </form>
      </div>

      <div id="Push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
      </div>
    </div>
    </body>

App.js:

var app = angular.module('birthdayToDo', []);

app.controller('main', function($scope){ 

    // Start as not visible but when button is tapped it will show as true 

        $scope.visible = false;

    // Create the array to hold the list of Birthdays

        $scope.bdays = [];

    // Create the function to Push the data into the "bdays" array

    $scope.newBirthday = function(){

        $scope.bdays.Push({name:$scope.bdayname, date:$scope.bdaydate});

        $scope.bdayname = '';
        $scope.bdaydate = '';

    };
});
54
Jess McKenzie

Sie sollten das Formular in jeden Knoten einfügen und mit ng-show Und ng-hide Die Bearbeitung aktivieren bzw. deaktivieren. Etwas wie das:

<li>
  <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
  <form ng-show="editing" ng-submit="editing = false">
    <label>Name:</label>
    <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
    <label>Date:</label>
    <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
    <br/>
    <button class="btn" type="submit">Save</button>
   </form>
 </li>

Die wichtigsten Punkte hier sind:

  • Ich habe die Steuerelemente ng-model Auf den lokalen Bereich umgestellt
  • ng-show Wurde zu form hinzugefügt, damit wir es während der Bearbeitung anzeigen können
  • span mit einem ng-hide Hinzugefügt, um den Inhalt während der Bearbeitung auszublenden
  • Es wurde ein ng-click Hinzugefügt, das sich in jedem anderen Element befinden kann und editing zu true umschaltet.
  • ng-submit Wurde geändert, um editing in false umzuschalten

Hier ist Ihr aktualisierter Plunker .

71
Caio Cunha

Ich suchte nach einer Inline-Bearbeitungslösung und fand einen vielversprechenden Plunker, der jedoch bei mir nicht sofort funktionierte. Nach einigem Basteln mit dem Code habe ich es zum Laufen gebracht. Ein großes Lob an die Person, die sich anfangs bemüht hat, dieses Stück zu codieren.

Das Beispiel finden Sie hier http://plnkr.co/edit/EsW7mV?p=preview

Hier geht der Code:

app.controller('MainCtrl', function($scope) {

  $scope.updateTodo = function(indx) {
    console.log(indx);
  };

  $scope.cancelEdit = function(value) {
    console.log('Canceled editing', value);
  };

  $scope.todos = [
    {id:123, title: 'Lord of the things'},
    {id:321, title: 'Hoovering heights'},
    {id:231, title: 'Watership brown'}
  ];
});

// On esc event
app.directive('onEsc', function() {
  return function(scope, Elm, attr) {
    Elm.bind('keydown', function(e) {
      if (e.keyCode === 27) {
        scope.$apply(attr.onEsc);
      }
    });
  };
});

// On enter event
app.directive('onEnter', function() {
  return function(scope, Elm, attr) {
    Elm.bind('keypress', function(e) {
      if (e.keyCode === 13) {
        scope.$apply(attr.onEnter);
      }
    });
  };
});

// Inline edit directive
app.directive('inlineEdit', function($timeout) {
  return {
    scope: {
      model: '=inlineEdit',
      handleSave: '&onSave',
      handleCancel: '&onCancel'
    },
    link: function(scope, Elm, attr) {
      var previousValue;

      scope.edit = function() {
        scope.editMode = true;
        previousValue = scope.model;

        $timeout(function() {
          Elm.find('input')[0].focus();
        }, 0, false);
      };
      scope.save = function() {
        scope.editMode = false;
        scope.handleSave({value: scope.model});
      };
      scope.cancel = function() {
        scope.editMode = false;
        scope.model = previousValue;
        scope.handleCancel({value: scope.model});
      };
    },
    templateUrl: 'inline-edit.html'
  };
});

Richtlinienvorlage:

<div>
  <input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
  <button ng-click="cancel()" ng-show="editMode">cancel</button>
  <button ng-click="save()" ng-show="editMode">save</button>
  <span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
    <span ng-hide="editMode" ng-click="edit()">{{model}}</span>
    <a ng-show="showEdit" ng-click="edit()">edit</a>
  </span>
</div>

Um es zu benutzen, füge einfach Wasser hinzu:

<div ng-repeat="todo in todos" 
     inline-edit="todo.title" 
     on-save="updateTodo($index)" 
     on-cancel="cancelEdit(todo.title)"></div>

AKTUALISIEREN:

Eine andere Möglichkeit ist die Verwendung von Readymade Xeditable für AngularJS:

http://vitalets.github.io/angular-xeditable/

26
John P

Ich habe deinen Plunker über angle-xeditable zum Laufen gebracht:

http://plnkr.co/edit/xUDrOS?p=preview

Es ist eine gängige Lösung für die Inline-Bearbeitung - Sie erstellen Hyperlinks mit der Direktive editable-text, Die in das Tag <input type="text"> Wechselt:

<a href="#" editable-text="bday.name" ng-click="myform.$show()" e-placeholder="Name">
    {{bday.name || 'empty'}}
</a>

Für date habe ich die Direktive editable-date Verwendet, die in html5 <input type="date"> Wechselt.

7
vitalets

Da dies eine übliche Funktionalität ist, ist es eine gute Idee, eine Direktive dafür zu schreiben. Tatsächlich hat das schon jemand gemacht und es mit Open Source bezogen. Ich habe editablespan library in einem meiner Projekte verwendet und es hat perfekt funktioniert, sehr zu empfehlen.

4