Html 就地编辑内容编辑_Html_Angularjs_Edit

Html 就地编辑内容编辑

html angularjs

Html 就地编辑内容编辑,html,angularjs,edit,Html,Angularjs,Edit,使用ng repeat编辑内容的最佳方式是什么在我理想的情况下，添加的生日将是一个超链接，当点击它时，它将显示一个编辑表单-与带有更新按钮的当前添加表单相同 HTML: <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title> <script src="//aj

使用

ng repeat

编辑内容的最佳方式是什么

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

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>

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 = '';

    };
});

您应该将表单放在每个节点内，并分别使用

ng show

和

ng hide

启用和禁用编辑。大概是这样的：


{{bday.name}}{{bday.date}}
姓名：
日期：


拯救

这里的要点是：

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


这是你的。
我正在寻找一个内联编辑解决方案，我发现了一个似乎很有希望的plunker，但它对我来说并不适用。在对代码进行了一些修补之后，我使它工作起来了。感谢最初为这篇文章编写代码的人
这里有一个例子
代码如下：
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'
  };
});

指令模板：
<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>


取消
拯救
{{model}}
由于这是一项常见的功能，因此最好为此编写一个指令。事实上，已经有人这样做了，并将其开源。我在中使用了library，它工作得非常好，强烈推荐。
我已修改了您的plunker，通过以下方式使其工作：

这是内联编辑的常见解决方案-您可以使用可编辑文本指令创建超链接
切换到
标记：


对于日期，我使用了切换到html5的可编辑日期
指令
，您的问题是指实际实现还是界面设计？@Flek它是指实现界面设计很容易我来这里是想知道您想要做什么，但是您是否注意到您正在重复“ul”元素而不是“li”元素？结果是，您的ul
与元素一样多，这是不正确的。感谢您出色的回答：）我有一个问题，当我编辑它时，它似乎也显示了添加表单-因为它设置为true如果我正确回答了您的问题，只需在newBirthday（）
上设置$scope.visible=false
。这将使添加项时添加表单消失。为了限制处理，我将把它放在一个指令中，这样除非需要，否则不会进行DOM操作和编译。我的观点是，大多数条目不需要编辑，但我们正在对所有条目添加处理以添加功能ngShow
和ngHide
不停止功能-它们只是将display:none添加到CSS中。因此，所有绑定仍然是连接的，DOM仍然是操纵的。如果我们这样做是作为一个指令，我们可以调用表单按需创建。下面是我在不久前创建的一个简单的原地编辑指令，用于说明：。还有一个更复杂的：。因为，Angular现在支持开箱即用。只是想强调1.1.5是一个不稳定的版本。
<div ng-repeat="todo in todos" 
     inline-edit="todo.title" 
     on-save="updateTodo($index)" 
     on-cancel="cancelEdit(todo.title)"></div>