CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

My text not add in list item in Angular js?

HI I m creating a new form and fill some text and submit but my text not save

Can u please help me

If i click a button add new than show a form add details in the form and save but not save .

I m new in ANgular

My Code is this

ANgular Js

var app = angular.module('myApp', []);
app.controller('myController', function($scope){
  $scope.peopleName = '';
  $scope.peopleSex = '';
  $scope.peple=[
    {name:"Saml", sex:"M"},
    {name:"somi", sex:"M"},
    {name:"jokyineya", sex:"F"}
    ];


    $scope.newItem = function(name, sex){
      if (this.peopleName === '') return;
       $scope.peple.push({
            name: title,
            sex: label
        });
        this.peopleName= "";
        this.peopleSex= "";
        this.showForm = false;
    }

})

HTML Code is 

<body ng-app="myApp">
  <div class="" ng-controller="myController">

    <form ng-submit="newItem(peopleName, peopleSex)" ng-show="showForm">

      Name
      <input type="text" ng-model="peopleName" />
      <br />
      <br />Sex
      <input type="text" ng-model="peopleSex" />
      <br />
      <br />
      <input type="button" value="Submit" />
      <br />
      <br />
      <br />
      <br />
    </form>

    <button ng-click="showForm=true; ">Add new</button>
    <ul>



      <li></li>
      <li ng-repeat="person in peple">
        {{person.name}} {{person.sex}}
      </li>
    </ul>
  </div>
</body>

Demo

Upvotes: 1

Views: 391

Answers (4)

dddd1919
dddd1919

Reputation: 888

Change html to this:
<form ng-submit="newItem()" ng-show="showForm">
And newItem function as: 

$scope.newItem = function(name, sex){
  if (this.peopleName === '') return;
   $scope.peple.push({
      name: $scope.peopleName,
      sex: $scope.peopleSex
  });
  $scope.peopleName= "";
  $scope.peopleSex= "";
  $scope.showForm = false;
}

Angularjs use $scope to binding value to html,so use it as posible, my suggest.

Upvotes: 0

Rickard Staaf
Rickard Staaf

Reputation: 2740

You have misunderstood some things here. But it is quite easy to fix. When you use ng-model in your html you already have written them to the $scope, so you do not need to send them as parameters.

$scope.newItem = function(){
  if ($scope.peopleName === '') return;
   $scope.peple.push({
        name: $scope.peopleName,
        sex: $scope.peopleSex
    });
    $scope.peopleName= "";
    $scope.peopleSex= "";
    $scope.showForm=false;
}

And call it with

<form ng-submit="newItem()" ng-show="showForm">

you also need the button to submit as answered before.

Upvotes: 0

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20751

Just a few change to be done

Working Demo

Change title to name and label to sex like as shown below

$scope.peple.push({
name: title,
sex: label
});

Change button to submit 

<input type="submit" value="Submit" />

Upvotes: 2

Tom
Tom

Reputation: 2631

Your issue is with 'title' and 'label':

$scope.newItem = function(name, sex){
  if (this.peopleName === '') return;
   $scope.peple.push({
        name: title, // this should be name
        sex: label // this should be sex
    });
    this.peopleName= "";
    this.peopleSex= "";
    this.showForm = false;
}

It should look like so:

$scope.newItem = function(name, sex){
  if (this.peopleName === '') return;
   $scope.peple.push({
        name: name,
        sex: sex
    });
    this.peopleName= "";
    this.peopleSex= "";
    this.showForm = false;
}

Upvotes: 0

Related Questions