angularjs中的动态表单字段
[英]Dynamic form field in angularjs
问题描述
我有带输入字段和复选框的表格，以及两个按钮，按钮分别用于添加和删除。 但是我在这里想删除添加按钮，只想勾选复选框就可以显示下一个字段。我该怎么做？
angular.module('ionicApp',['ionic']) .controller('myctrl',function($scope){ $scope.data ={ names:[{ name:""}] }; $scope.addRow = function(index){ var name = {name:""}; if($scope.data.names.length <= index+1 && $scope.data.names.length<10){ $scope.data.names.splice(index+1,0,name); } }; $scope.deleteRow = function($event,index){ if($event.which == 1) $scope.data.names.splice(index,1); } })
.button-dark{ margin-top:10px; } .button-delete{ display: inline-block; float: right; position: relative; width: 24px; height: 33px; top: -36px; right: 5px; color: #fff; background: red; border: 0; }
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Multiple input</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="myctrl"> <ion-header-bar class="bar-positive"> <h1 class="title">Ionic app</h1> </ion-header-bar> <ion-content> <form id="valueForm" ng-submit="saveValues(values)"> <div ng-repeat="name in data.names track by $index"> <label class="item item-input" style="width: 92%"> <input type="text" placeholder="Answer" ng-model="data.names[$index].name"> <ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox> </label> <button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"> </div> </div> <button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button> </div> </form> </ion-content> </body> </html>
1 个解决方案
解决方案1
1 2016-11-11 12:25:10
删除“ 添加”按钮，然后将ng-click="addRow($index)"到复选框。.检查以下工作片段
angular.module('ionicApp',['ionic']) .controller('myctrl',function($scope){ $scope.data ={ names:[{ name:""}] }; $scope.addRow = function(index){ var name = {name:""}; if($scope.data.names.length <= index+1 && $scope.data.names.length<10){ $scope.data.names.splice(index+1,0,name); } }; $scope.deleteRow = function($event,index){ if($event.which == 1) $scope.data.names.splice(index,1); } })
.button-dark{ margin-top:10px; } .button-delete{ display: inline-block; float: right; position: relative; width: 24px; height: 33px; top: -36px; right: 5px; color: #fff; background: red; border: 0; }
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Multiple input</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="myctrl"> <ion-header-bar class="bar-positive"> <h1 class="title">Ionic app</h1> </ion-header-bar> <ion-content> <form id="valueForm" ng-submit="saveValues(values)"> <div ng-repeat="name in data.names track by $index"> <label class="item item-input" style="width: 92%"> <input type="text" placeholder="Answer" ng-model="data.names[$index].name"> <ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal" ng-click="addRow($index)"></ion-checkbox> </label> <button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button> </div> </div> <button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button> </div> </form> </ion-content> </body> </html>
生成动态表单输入字段并在angularJS的数组中收集字段数据
[英]Generate dynamic form input fields and collect field data in an array in angularJS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.