角JS - 编辑一个内容编辑 [英] Angular JS - Edit In Place Content Editing

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

问题描述

在使用 NG-重复什么是能够编辑内容的最好方式？

在我的理想状态下的添加生日将是一个超链接，当这被窃听，它会显示一个编辑表单 - 一样的，与更新按钮当前添加表单

直播preVIEW（Plunker）

HTML： 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
  ＆LT;头LANG =ENGT＆;
    ＆LT;间的charset =UTF-8＆GT;
    ＆LT;标题＆GT;定制Plunker＆LT; /标题＆GT;
    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js\"></script>
    ＆LT;脚本＆GT;
      文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;
    ＆LT; / SCRIPT＆GT;
    ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
    ＆LT;链接HREF =// netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css
    相对=样式＆GT;
  ＆LT; /头＆GT;
＆LT;机身NG-应用=birthdayToDoNG控制器=主＆GT;
    ＆LT; D​​IV ID =包装＆GT;      ＆LT;！ - 开始页面内容 - ＆GT;
      ＆LT; D​​IV CLASS =容器＆GT;
        ＆LT; D​​IV CLASS =页面页眉＆GT;
          ＆LT; H1＆GT;生日提醒和LT; / H1＆GT;
        ＆LT; / DIV＆GT;
            ＆LT; UL NG重复=BDAY在bdays＆GT;
                ＆LT;立GT; {{bday.name}} | {{bday.date}}＆LT; /李＆GT;
            ＆LT; / UL＆GT;           ＆LT;形式NG秀=看得见的NG-提交=newBirthday（）＆GT;
            ＆LT;标签＆gt;名称：LT; /标签＆gt;
            ＆LT;输入类型=文本NG模型=bdayname占位符=名称NG-要求/＆GT;
            ＆LT;标签＆gt;日期：＆LT; /标签＆gt;
            ＆LT;输入类型=日期NG模型=bdaydate占位符=日期NG-要求/＆GT;
            ＆LT; BR /＆GT;
            ＆LT;按钮类=BTN类型=提交＆GT;保存＆LT; /按钮＆GT;
        ＆LT; /表及GT;
      ＆LT; / DIV＆GT;      ＆LT; D​​IV ID =推＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;    ＆LT; D​​IV ID =页脚＆GT;
      ＆LT; D​​IV CLASS =容器＆GT;
        ＆LT;一类=BTNNG点击=可见=真正的＆GT;＆LT; I类=图标加上＆GT;＆LT; /我＆gt;添加＆LT; / A＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; /身体GT;

App.js： 

  VAR应用= angular.module（'birthdayToDo'，[]）;app.controller（'主'，函数（$范围）{    //开始为不可见的，但是当按钮被窃听，它会显示为真        $ scope.visible = FALSE;    //创建数组举行生日列表        $ scope.bdays = [];    //创建推数据的功能进入bdays阵    $ scope.newBirthday =功能（）{        $ scope.bdays.push（{名：$ scope.bdayname，日期：$ scope.bdaydate}）;        $ scope.bdayname ='';
        $ scope.bdaydate ='';    };
}）;


解决方案

您应该把表单中的每个节点内，并使用 NG-节目和 NG-隐藏来分别启用和禁用编辑。事情是这样的：

＆LT;立GT;
  ＆LT;跨度NG隐藏=编辑NG点击=编辑=真正的＆GT; {{bday.name}} | {{bday.date}}＆LT; / SPAN＆GT;
  ＆LT;形式NG秀=编辑NG提交=编辑=假＆GT;
    ＆LT;标签＆gt;名称：LT; /标签＆gt;
    ＆LT;输入类型=文本NG模型=bday.name占位符=名称NG-要求/＆GT;
    ＆LT;标签＆gt;日期：＆LT; /标签＆gt;
    ＆LT;输入类型=日期NG模型=bday.date占位符=日期NG-要求/＆GT;
    ＆LT; BR /＆GT;
    ＆LT;按钮类=BTN类型=提交＆GT;保存＆LT; /按钮＆GT;
   ＆LT; /表及GT;
 ＆LT; /李＆GT;

这里的关键点是：


  • 我已经改变了控制 NG-模型本地作用域

  • 新增 NG-节目到格式这样我们就可以表现出来，同时修改

  • 新增了跨度与 NG-隐藏来隐藏内容，同时修改

  • 新增了 NG-点击，这可能是在其他任何元素，切换编辑到真正

  • 改变 NG-提交切换编辑到假

下面是您更新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:

  • I've changed controls ng-model to the local scope
  • Added ng-show to form so we can show it while editing
  • Added a span with a ng-hide to hide the content while editing
  • Added a ng-click, that could be in any other element, that toggles editing to true
  • Changed ng-submit to toggle editing to false

Here is your updated Plunker.

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆