Html 就地编辑内容编辑

Question

提问by Jess McKenzie

When using ng-repeatwhat is the best way to be able to edit content?

当使用ng-repeat什么是能够编辑内容的最佳方式时？

In my ideal situation the addedbirthday would be a hyperlink, when this is tapped it will show an edit form - just the same as the current add form with an update button.

在我的理想情况下，添加的生日将是一个超链接，当它被点击时，它将显示一个编辑表单 - 与当前添加表单相同，带有更新按钮。

Live Preview (Plunker)

实时预览 (Plunker)

HTML:

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:

应用程序.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 = '';

    };
});

Answer 1

回答by Caio Cunha

You should put the form inside each node and use ng-showand ng-hideto enable and disable editing, respectively. Something like this:

您应该将表单放在每个节点内，并分别使用ng-show和ng-hide启用和禁用编辑。像这样的东西：

<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>

The key points here are:

这里的关键点是：

I've changed controls ng-modelto the local scope
Added ng-showto formso we can show it while editing
Added a spanwith a ng-hideto hide the content while editing
Added a ng-click, that could be in any other element, that toggles editingto true
Changed ng-submitto toggle editingto false

我已将控件更改ng-model为本地范围
添加ng-show到form以便我们可以在编辑时显示它
添加了span一个ng-hide在编辑时隐藏内容
添加了一个ng-click，它可以在任何其他元素中，切换editing到true
更改ng-submit为切换editing到false

Here is your updated Plunker.

这是您更新的 Plunker。

Answer 2

回答by John P

I was looking for a inline editing solution and I found a plunker that seemed promising, but it didn't work for me out of the box. After some tinkering with the code I got it working. Kudos to the person who made the initial effort to code this piece.

我正在寻找内联编辑解决方案，我发现了一个看起来很有前途的 plunker，但它对我来说开箱即用。在对代码进行了一些修补后，我让它工作了。感谢最初努力编写这篇文章的人。

The example is available here http://plnkr.co/edit/EsW7mV?p=preview

该示例可在此处获得http://plnkr.co/edit/EsW7mV?p=preview

Here goes the 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'
  };
});

Directive template:

指令模板：

<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>

To use it just add water:

要使用它，只需加水：

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

UPDATE:

更新：

Another option is to use the readymade Xeditable for AngularJS:

另一种选择是使用现成的 Xeditable for AngularJS：

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

Answer 3

回答by vitalets

I've modified your plunker to get it working via angular-xeditable:

我已经修改了您的 plunker 以使其通过angular-xeditable 工作：

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

It is common solution for inline editing - you creale hyperlinks with editable-textdirective that toggles into <input type="text">tag:

这是内联编辑的常见解决方案 - 您editable-text可以使用切换到<input type="text">标签的指令创建超链接：

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

For date I used editable-datedirective that toggles into html5 <input type="date">.

对于日期，我使用editable-date了切换到 html5 的指令<input type="date">。

Answer 4

回答by Micha? Kwiatkowski

Since this is a common piece of functionality it's a good idea to write a directive for this. In fact, someone already did that and open sourced it. I used editablespanlibrary in one of my projectsand it worked perfectly, highly recommended.

由于这是一个常见的功能，因此为此编写一个指令是个好主意。事实上，已经有人这样做了并开源了它。我在我的一个项目中使用了editablespan库，它运行良好，强烈推荐。

Html 就地编辑内容编辑

提问by Jess McKenzie

回答by Caio Cunha

回答by John P

回答by vitalets

回答by Micha? Kwiatkowski

相关推荐

最近更新

标签

Html 就地编辑内容编辑

提问by Jess McKenzie

回答by Caio Cunha

回答by John P

回答by vitalets

回答by Micha? Kwiatkowski

相关推荐

Html 在溢出隐藏div之外扩展位置绝对div

Html 如何在垂直和水平方向的中心/中间定位图像

Html 从锚点 (a) 标签获取本地 href 值

Html 将图像在div内的中心和中间对齐

相关推荐

最近更新

标签