Question

我在我的列表中创建了一个新表单并创建了一个表单，如果我填写表单中的数据而不是单击提交按钮，但我的数据未添加到填充节目中。

请你帮助我，我是角色js的新人

我的代码在这里

Angular Js

//代码在这里

var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function($scope) {
  $scope.items = [{
      "title": "Book",
      "subtitle": [{
        "subtitle": "PanchTantra ",

        "description": "Kids Books",
        "authorName": "Kisna"
      }],
      "description": "Some Book is very Good."
    }, {
      "title": "Mediciane Book",
      "subtitle": [{
        "subtitle": "Pharmacy",

        "description": "This book is related to Docotrs"
      }],
      "description": "This book is very hard"
    }, {
      "title": "Reciape Book",
      "subtitle": [{
        "subtitle": "Khana Khajana",
        "description": "This book is related to Foods"
      }],
      "description": "This book is nice..."
    }, {
      "title": "Computer Book",
      "subtitle": [{
        "subtitle": "BCA MCA",
        "description": "This book is related to Education"
      }],
      "description": "This book is very beautiful."
    }

  ];




  $scope.addnewFormData = function(subtitle, description) {
    if (this.addNewText === '') return;
    $scope.items.subtitle.push({
      subtitle: subtitle,
      description: description
    });
  }

});

HTML COde

<body ng-app="myFapp">
  <ul ng-controller="myControler">
    <li ng-repeat="item in items">
      <div>{{item.title}}</div>
      <div>{{item.description}}</div>
      <ul>
        <li ng-repeat="subtitle in item.subtitle">
          <div>{{subtitle.subtitle }}
            <a ng-show="subtitle.authorName" href="#">
              <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}}</a>
          </div>
          <div>{{subtitle.description}} this is</div>
        </li>
        <li>

          <form ng-submit="addnewFormData(addNewText, addBookDescription)">
            <input type="text" ng-model="addNewText" placeholder="Enter Book Name" />
            <input type="text" ng-model="addBookDescription" placeholder=" Enter Book Description here ..." />
            <input type="submit" value="submit" />
          </form>
        </li>
      </ul>
    </li>
  </ul>
</body>

Plunkr link

Answer 1

在addnewFormData您尝试访问subtitle数组中的items字段，

，但您需要从当前item

访问该字段

最简单的解决方案是将第三个参数添加到addnewFormData并将当前项目传递给它，因为实际上每个项目有一个表单，并且该函数不知道要访问哪个项目。 / p>

像

这样的东西

$scope.addnewFormData = function(item, subtitle, description){
  if(this.addNewText === '') return ;
  item.subtitle.push({
    subtitle:subtitle,
    description:description
  });
}

并在html中：

<form ng-submit="addnewFormData(item, addNewText, addBookDescription)">

Answer 2

来自文档：

在Angular形式中可以嵌套。这意味着当所有子表单都有效时，外部表单也是有效的。但是，浏览器不允许嵌套元素，因此Angular提供的ngForm指令行为相同但可以嵌套。这允许您使用嵌套表单，这在使用ngRepeat指令动态生成的表单中使用Angular验证指令时非常有用。由于无法使用插值动态生成输入元素的name属性，因此必须在ngForm指令中包装每组重复输入，并将它们嵌套在外部表单元素中。

https://docs.angularjs.org/api/ng/directive/form

创建一个表单并添加数据抛出Angular js但没有添加？

2 个答案: