Edit the form and new form add text throw angular js

Question

Hi ,

I m write a code I m showing the two section and one form for add new text in my projects.

But i have two major Problem .

is if i click to edit button than show the form but if i change any text in form than i click to save button there is a nothing happen .
is if i fill the data in new form and just press submit button not add the data in my top li Please check this and solve my problem .

Thanks in advanced Please help me

My Code is here

Angular Code is this

var app = angular.module('myApp', []);

app.controller('mySearchController', function($scope) {
  $scope.searhBars = [{
    title: "fiel 1",
    description: 'What do you want'
  }, {
    title: "fiel 2",
    description: "I want to this"
  }, {
    title: "fiel 3",
    description: "Why do you want me "
  }];

  $scope.formSubmit = function(searhBar) {
    showForm = false;
  };


  $scope.newItemAdd = function(title, description) {
    if (this.newName === '') return;
    $scope.searhBar.push({
      title: title,
      description: description
    });
    this.newName = '';
    this.newDes = '';
  };
});

HTML Code is

<body ng-app="myApp">
  <ul ng-controller="mySearchController">
    <li>Hello</li>
    <li ng-repeat="searhBar in searhBars">


      <h4 ng-show="!showForm">{{searhBar.title}}</h4>
      <p ng-show="!showForm">{{searhBar.description}}</p>
      <button ng-show="!showForm" ng-click="showForm=true">Edit me</button>



      <form ng-submit="formSubmit(searhBar)" ng-show="showForm">
        <label>Field 1.
          <input type="text" ng-model="searhBar.title" />
        </label>
        <label>Enter Description
          <textarea ng-model="searhBar.description"></textarea>
        </label>
        <input type="submit" value="Save" />
      </form>


    </li>

    <li>
      <form ng-submit="newItemAdd(newName, newDes)">
        <label>Field
          <input type="text" ng-model="newName" />
        </label>
        <label>Enter Description
          <textarea ng-model="newDes"></textarea>
        </label>
        <input type="submit" value="submit" />
      </form>
    </li>
  </ul>
</body>

Demo is

Josep · Accepted Answer · 2014-09-09 06:49:11Z

2

Is this what you wanted?

http://plnkr.co/edit/9ginpPiLUaVyEPdpu32f?p=preview

I fixed this part:

$scope.formSubmit = function(){
 this.showForm = false;
};


$scope.newItemAdd = function(title, description){
  if(this.newName === '') return ;
  $scope.searhBars.push({
    title:title,
    description:description
  });
  this.newName= '';
  this.newDes= '';
};

And this one:

    <input type="submit" ng-click="formSubmit()" />

Oh, I also fixed this:

    <label>Field {{$index + 1}}:

In order to display the correct number of the field.

edited Sep 9, 2014 at 6:49

answered Sep 9, 2014 at 6:29

Josep

13.1k2 gold badges44 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cevek · Accepted Answer · 2014-09-09 06:38:41Z

2

Typo: $scope.searhBar[s].push({

for close form

<form ng-submit="formSubmit(searhBar); showForm=false"

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

answered Sep 9, 2014 at 6:38

cevek

8721 gold badge8 silver badges16 bronze badges

Comments

Rickard Staaf · Accepted Answer · 2014-09-09 06:36:22Z

1

You need to write:

$scope.formSubmit = function(searhBar){
    this.showForm = false;
};

answered Sep 9, 2014 at 6:36

Rickard Staaf

2,8702 gold badges17 silver badges15 bronze badges

Collectives™ on Stack Overflow

Edit the form and new form add text throw angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related