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.