创建一个表单并编辑表单，但不保存(以角度）

create a form and editing the form but not save (in angular )?

本文关键字：表单 保存 一个 创建 编辑      更新时间：2023-09-26

嗨，朋友们，我已经创建了一个表单并显示它。如果我点击"编辑按钮"，按钮表单将打开并显示我编辑表单并点击"保存"按钮。此按钮无效且不保存数据，请帮助我

代码

// Code goes here
var app = angular.module('theme', []);
app.controller('portfolioController', function($scope) {
  $scope.portofoliosBox = [{
    title: "Finance Projects",
    description: "# of projects Count Sum Aggregate 1"
  }, {
    title: "Marketing Projects",
    description: "# of projects Count Sum Aggregate 2"
  }, {
    title: "Finance Projects",
    description: "# of projects Count Sum Aggregate 3"
  }, {
    title: "Marketing Projects",
    description: "# of projects Count Sum Aggregate 4"
  }, {
    title: "Finance Projects",
    description: "# of projects Count Sum Aggregate 5"
  }];
  $scope.editFormPortFolio = function(portfolioBox) {
    editFormPorfolio = true;
    portfolioBox.title = portfolioBox.title;
    portfolioBox.description = portfolioBox.description;
  }

});

HTML代码

<body ng-app="theme">
    <div ng-controller="portfolioController">
                        <div  ng-repeat="portfolioBox in portofoliosBox">
                        <button ng-click="editFormPorfolio=true" ng-show="!editFormPorfolio">Edit Button</button>
                            <h5 ng-show="!editFormPorfolio">{{portfolioBox.title}}</h5>
                                <p ng-show="!editFormPorfolio">{{portfolioBox.description}}</p>

                                <form ng-show="editFormPorfolio" ng-submit="editFormPortFolio(portfolioBox)">
                                <label class="edit-pencil">
                                    <button>Save</button>
                                    <input type="submit" ng-show />
                                </label>
                                <input type="text" ng-model="portfolioBox.title" />
                                <textarea row="5" cols="" ng-model="portfolioBox.description"></textarea>
                            </form>
                    </div>

  </body>

演示

使用portfolioBox 的"编辑"属性

portfolioBox.edit = true

以及保存时

portfolioBox.edit = false

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

相关文章：