如何在角js中添加具有唯一名称的dyanamic表单域

我有一个表单，我动态地添加了域，但是当我尝试获取唯一的名称时它不工作，任何人都可以提前帮助我。找到下面我的代码。如何在角js中添加具有唯一名称的dyanamic表单域

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Angular Forms | Form2 </title> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
<script src="js/angular.js"></script> 
<script src="js/jquery-2.0.3.js"></script> 
<script src="js/app2.js"></script> 
</head> 

<body> 
<div ng-app="myApp2" ng-controller="myCtrl2"> 
<div class="container"> 
    <div class="col-sm-9 col-sm-offset-2"> 
    <form name="form1" ng-submit="submitForm2()" enctype="multipart/form-data"> 

<!--for adding extra fields data--> 
     {{count}} 
     <fieldset data-ng-repeat="choice in choices" ng-init="count=0"> 

     <div class="form-group"> 
      <div class="row"> 
       <label class="col-md-2">Skills</label> 
        <div class="col-md-7"> 
         <input type="text" class="form-control" name="skills" ng-focus="userskills_msg=true" ng-model="user2.skills" placeholder="Enter your skills" /> 
         <p ng-show="errorSkill">{{errorSkill}}</p> 
        </div> 
       <div class="col-sm-3 col-md-3"> <span ng-cloak ng-show="userskills_msg"> please choose your location</span> </div> 
       <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> 
      </div> 
     </div> 

     </fieldset> 
     <!--end adding extra fields data--> 
    <div class="form-group"> 
      <div class="col-md-3"></div> 
      <div class="col-md-6"> <a href="javascript:void(0);" id="add_emp" ng-click="addfields()">+add another employment</a><!--<button class="addfields" ng-click="addfields()">Add fields</button>--> </div> 

     </div> 
     </div> 
    </div> 
    </div> 

    </body> 
    </html>

我是初始化采用NG-初始化变量和我递增控制器，该值将incrementd但我是不是geeting唯一的名称和文件DIS不显示

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

sampleApp.controller("myCtrl2", function ($scope, $http) { 
    $scope.addfields = function() { 
     var newItemNo = $scope.choices.length + 1; 
     $scope.count = newItemNo; 
     console.log(count); 
     console.log(newItemNo); 
     $scope.choices.push({ 
      'id' : 'choice' + newItemNo 
     }); 
    }; 

    $scope.removeChoice = function() { 
     var lastItem = $scope.choices.length - 1; 
     $scope.choices.splice(lastItem); 
    }; 
});

来源

2016-12-02 medanaresh

这是怎么问题有关PHP？ – Dragos

您缺少表单结束标记，并且您的链接标题未终止。 –

这是你的code working on plunker。

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

 
sampleApp.controller("myCtrl2", function ($scope, $http) { 
 
    
 
    $scope.choices = []; 
 
    $scope.count = 0; 
 
    
 
    $scope.addfields = function() { 
 
     var newItemNo = $scope.choices.length + 1; 
 
     
 
     $scope.count = newItemNo; 
 
     console.log($scope.count); 
 
     
 
     var item = {}; 
 
     
 
     item.id = "choice" + newItemNo; 
 
     
 
     $scope.choices.push(item); 
 
    }; 
 

 
    $scope.removeChoice = function() { 
 
     var lastItem = $scope.choices.length - 1; 
 
     $scope.choices.splice(lastItem); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
     <script src="controller.js"></script> 
 
     
 
    </head> 
 
    <body> 
 
     <div ng-app="myApp2" ng-controller="myCtrl2"> 
 
     <div class="container"> 
 
      <div class="col-sm-9 col-sm-offset-2"> 
 
       <form name="form1" ng-submit="submitForm2()" enctype="multipart/form-data"> 
 
       {{count}} 
 
       <fieldset data-ng-repeat="choice in choices" ng-init="count=0"> 
 
        <div class="form-group"> 
 
        <div class="row"> 
 
         <label class="col-md-2">Skills</label> 
 
         <div class="col-md-7"> 
 
          <input type="text" class="form-control" name="skills" ng-focus="userskills_msg=true" ng-model="user2.skills" placeholder="Enter your skills" /> 
 
          <p ng-show="errorSkill">{{errorSkill}}</p> 
 
         </div> 
 
         <div class="col-sm-3 col-md-3"> <span ng-cloak ng-show="userskills_msg"> please choose your location</span> </div> 
 
         <button type="button" class="remove" ng-show="$last" ng-click="removeChoice()">Remove Choice</button> 
 
        </div> 
 
        </div> 
 
       </fieldset> 
 
       <div class="form-group"> 
 
        <div class="col-md-3"></div> 
 
        <div class="col-md-6"> 
 
        <button type="button" class="addfields" ng-click="addfields()">Add fields</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

你忘了初始化必需的变量正常工作

$scope.choices=[]; 
$scope.count=0;

而且一些不好的引用，例如console.log(count);应console.log ($ scope.count);

来源

2016-12-02 14:05:29

感谢您的回复，在添加两个字段后添加上面的代码..我在该字段中输入的数据在提交表单后没有进入后期参数 – medanaresh

如何在角js中添加具有唯一名称的dyanamic表单域

回答

相关问题