Question

您好，

我正在编写一个代码，展示了两个部分和一个用于在我的项目中添加新文本的表单。

但我有两个主要问题。

如果我点击编辑按钮而不是显示表单，但如果我更改了表单中的任何文字而不是点击保存按钮，则表示没有任何反应
如果我用新表单填写数据，只需按提交按钮，不要在我的顶级li中添加数据请检查并解决我的问题。

先谢谢了请帮帮我

我的代码在这里

Angular Code就是这个

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

<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

Answer 1

这是你想要的吗？

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

我修好了这部分：

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

这一个：

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

哦，我也解决了这个问题：

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

为了显示正确的字段数。

Answer 2

错字：$ scope.searhBar [s] .push（{

表示关闭表格

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

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

Answer 3

你需要写：

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

编辑表单和新表单添加文本throw angular js

3 个答案: