Question

我正在研究＆＃34;联系人＆＃34; Angular中的表单应该：

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

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

*名字

*姓氏

*电话号码

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

- 所有表单数据都可以通过单个“提交”来捕获/注册。处理整个表单的按钮，而不必按“添加”按钮。在每个联系项目上。

简而言之，可以有任意数量的联系人，每个联系人可以拥有任意数量的电话号码，并且只能提交一个＆＃39;提交＆＃39;所有数据的按钮。

这在Angular中是否可行？我知道如何使用Jquery实现这一点，但我很难理解如何使用Angular完成此操作。我已经看到了接近我正在寻找的解决方案，但其中大多数只包含一个输入（而不是一组输入），并且没有一个具有单个提交按钮功能。

宁愿不必使用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

我有类似的问题，并解决此问题。我希望能帮助你。

＆＃13;

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);
    };

   
}]);

＆＃13;

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

＆＃13;

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

2 个答案: