AngularJS

Question

我正在 Angular 中制作 "Contacts" 表格，应该：

-允许用户动态添加和删除联系人条目。

-单个联系人条目将具有以下各项的输入：

*名字

*姓氏

*phone个数

-每个联系人可以有任意数量的 phone 号码，因此这些输入可以由用户动态添加或删除，类似于父联系人项目。

-所有表单数据都可以 captured/registered 来自处理整个表单的单个 'submit' 按钮，而不必在每个单独的联系人项目上按 'add'。

简而言之，可以有任意数量的联系人，每个联系人可以有任意数量的phone个号码，并且所有数据应该只有一个'submit'按钮。

这在 Angular 中可行吗？我知道如何使用 Jquery 实现这一点，但我无法理解如何使用 Angular 实现这一点。我已经看到了与我正在寻找的近似的解决方案，但其中大多数只包含添加一个输入（而不是一组输入），并且其中 none 个具有单个提交按钮功能。

宁愿不必使用 Jquery。有什么建议么？

谢谢！

Answer 1

这是一个示例代码

<tr ng-repeat="contact in ContactList"  >  
      <td>
            <input ng-model="contcact.firstName">
      </td>
      <td>
            <input ng-model="contcact.lastName">
      </td>
 </tr>

.....

<!---click button--->
<button ng-click="AddContact()">

your controller ...

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

myApp.controller('Example', ['$scope', function($scope) {
$scope.ContactList = [{firstName: 'aaa' ,lastName:'bbb'}];
$scope.AddContact = function(){ var NewContact ={firstName: 'aaa' ,lastName:'bbb'} ;
$scope.ContactList.push();  
}
}]);

Answer 2

我以前也遇到过类似的问题，就是这样解决的。希望对你有帮助。

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

/**
 * Created by Hadi on 7/28/2015.
 */

app.controller("MainController",['$scope','$http',function($scope,$http){

    $scope.formData = {
        info:[
            {
                name:"",
                family:"",
                phones:[
                    {
                       phone:"" 
                    }
                ]
            }
        ]
    };

    $scope.addItem = function(index){
        if($scope.formData.info[index+1] == null) {
            $scope.formData.info.push(
                {
                  name:"",
                  family:"",
                  phones:[
                    {
                       phone:"" 
                    }
                  ]
            });
        }
    };
  $scope.removeItem = function (index) {
        $scope.formData.info.splice(index, 1);
    };
    $scope.addPhone = function (index, index2) {
        var newphone = {
            phone:""
        };
        if ($scope.formData.info[index].phones[index2 + 1] == null)
            $scope.formData.info[index].phones.push(newphone);

    };
    $scope.removePhone = function (index1, index) {
        $scope.formData.info[index1].phones.splice(index, 1);
    };

   
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
   <table border="1">
     <tr ng-repeat="item in formData.info track by $index">
        <td> <input type="button" ng-click="removeItem($index)" value="Delete Contact" ng-show="$index > 0"></td>
        <td> <input type="button" ng-click="addItem($index)" value="Add New Contact" ng-show="$last"></td>
        <td> <input type="text" ng-model="formData.info[$index].name"></td>
        <td><input type="text" ng-model="formData.info[$index].family"></td>
        <td > 
          <table>
          <tr ng-repeat="phone in formData.info[$index].phones">
            <td> <input type="text" ng-model="phone.phone"></td>
            <td> <input type="button" ng-click="addPhone($parent.$index,$index)" value="Add Phone" ng-show="$last"></td>
            <td> <input type="button" ng-click="removePhone($parent.$index,$index)" value="Delete Phone" ng-show="$last"></td>
            </tr>
          </table>
         
       </td>
       
        <td> <input type="button" ng-click="deleteRow($event,$index)" value="Delete Phone" ng-show="$index != 0"></td>
     </tr >
     
   </table> 
  <pre>{{formData | json}}</pre>
</div>

AngularJS - 在表单上动态添加输入，在一次提交时从所有输入中收集数据

AngularJS - Dynamically added inputs on form, collect data from all inputs on single submit

forms

submit