就地编辑内容编辑

问题描述 投票：0回答：4

使用 

ng-repeat
编辑内容的最佳方式是什么？

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

实时预览（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 = '';

    };
});


    
	




html

angularjs

edit


4个回答




    
    
    

        

            

                

                    
71
投票

                    

                

            

        

        
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>




这里的要点是：





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


    • 这是您的
更新的 Plunker
。
    




    

    
    
    

    

        

            

                

                    
26
投票

                    
                

            

        

        


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

代码如下：


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>



使用时只需加水：


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



更新：


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


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

    




    

    
    
    

    

        

            

                

                    
7
投票

                    
                

            

        

        
angular-xeditable
 工作：


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


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


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




到目前为止，我使用了 
editable-date
 指令来切换到 html5 
<input type="date">
。
    





    

    
    
    

    

        

            

                

                    
4
投票

                    
                

            

        

        
我的一个项目
中使用了editablespan库，它运行得很好，强烈推荐。
    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.