创建一个表单并编辑表单但不保存(有角度)?

时间:2014-09-08 10:40:57

标签: javascript angularjs forms angularjs-directive angularjs-ng-repeat

嗨朋友我已创建表格并显示如果我点击“编辑按钮”按钮表格将​​打开并显示我编辑表格并单击按钮“保存”此按钮无效并且不保存数据请帮助我

代码

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

Demo

1 个答案:

答案 0 :(得分:1)

使用&#34;编辑&#34; portfolioBox的属性

portfolioBox.edit = true

以及保存时

portfolioBox.edit = false

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