Question

我正在创建一个新表单并填写一些文本并提交，但我的文字没有保存

你可以帮我吗

如果我点击一个按钮添加新的，而不是显示表单，在表单中添加详细信息并保存但不保存。

我是 ANgular

的新人

我的代码就是这个

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代码

<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

Answer 1

只需做一些改变

<强> Working Demo

将标题更改为名称，将标签更改为性别，如下所示

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

将按钮更改为提交

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

Answer 2

您的问题是＆＃39; title＆＃39;和＆＃39;标签＆＃39;：

$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;
}

看起来应该是这样的：

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

Answer 3

你在这里误解了一些事情。但它很容易修复。当您在html中使用ng-model时，您已经将它们写入$ scope，因此您无需将它们作为参数发送。

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

并用

调用它

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

您还需要按钮提交之前的回答。

Answer 4

将 html 更改为：
<form ng-submit="newItem()" ng-show="showForm">
newItem的功能如下：

$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使用$scope将值绑定到html，因此我建议将其用作posible。

我的文字没有添加到Angular js的列表项中？

4 个答案: