就地编辑内容编辑

就地编辑内容编辑

关注
发信
关注(28)粉丝(399)

就地编辑内容编辑

本文介绍了就地编辑内容编辑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 ng-repeat 时，编辑内容的最佳方式是什么?

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

实时预览(Plunker)

HTML:

<head lang="zh-cn"><meta charset="utf-8"><title>自定义Plunker</title><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script><脚本>document.write('<base href="' + document.location + '"/>');<script src="app.js"></script><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"rel="样式表"><body ng-app="birthdayToDo" ng-controller="main"><div id="包裹"><!-- 开始页面内容--><div class="容器"><div class="page-header"><h1>生日提醒</h1>

<ul ng-repeat="bday in bdays">

  • {{bday.name}} |{{bday.date}}</li><form ng-show="visible" ng-submit="newBirthday()"><标签>名称:</label><input type="text" ng-model="bdayname" placeholder="Name" ng-required/><label>日期:</label><input type="date" ng-model="bdaydate" placeholder="Date" ng-required/><br/><button class="btn" type="submit">保存</button></表单>

    • <div id="push"></div>

    <div id="页脚"><div class="容器"><a class="btn" ng-click="visible = true"><i class="icon-plus"></i>添加</a>

    App.js:

    var app = angular.module('birthdayToDo', []);app.controller('main', function($scope){//开始时不可见，但当点击按钮时，它将显示为真$scope.visible = false;//创建一个数组来保存生日列表$scope.bdays = [];//创建函数将数据推入bdays"数组$scope.newBirthday = function(){$scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});$scope.bdayname = '';$scope.bdaydate = '';};});
    解决方案

    你应该把表单放在每个节点里面，并使用 ng-show 和 ng-hide 来启用和禁用编辑，分别.像这样:

  • <span ng-hide="editing" ng-click="editing = true">{{bday.name}} |{{bday.date}}</span><form ng-show="editing" ng-submit="editing = false"><标签>名称:</label><input type="text" ng-model="bday.name" placeholder="Name" ng-required/><label>日期:</label><input type="date" ng-model="bday.date" placeholder="Date" ng-required/><br/><button class="btn" type="submit">保存</button></表单>

    • 这里的关键点是:

    这是您的更新后的Plunker.

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

    In my ideal situation the added birthday 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)

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

    };
});
    解决方案

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

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

    Here is your updated Plunker.

    这篇关于就地编辑内容编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

    08-24 09:07
    Powered by LMLPHP ©2024 就地编辑内容编辑 0.052521