angularjs中的动态表单域

问题描述：

我的表单有输入框和复选框以及两个按钮，按钮用于添加和删除。但我想在这里删除添加按钮，只想检查复选框来显示下一个字段。我该如何做？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"> 
 
\t \t \t <label class="item item-input" style="width: 92%"> 
 
\t \t \t <input type="text" placeholder="Answer" ng-model="data.names[$index].name"> 
 
\t \t \t <ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox> 
 
\t \t \t </label> 
 
\t \t \t <button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button> 
 
\t \t \t <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"> 
 
\t \t \t 
 
\t \t \t </div> \t 
 
\t \t </div> 
 

 

 
     
 

 
     <button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button> 
 
     </div> 
 
    </form> 
 

 
    </ion-content> 
 

 
</body> 
 

 
</html>

您可以用'NG-hide' ，在按钮上使用check-bo的'model' x'。 '' – Sravan

我不希望使用按钮添加新字段@Sravan –

答

取出添加按钮，添加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"> 
 
\t \t \t <label class="item item-input" style="width: 92%"> 
 
\t \t \t <input type="text" placeholder="Answer" ng-model="data.names[$index].name"> 
 
\t \t \t <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> 
 
\t \t \t </label> 
 
\t \t \t <button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button> 
 
\t \t \t 
 
\t \t \t </div> \t 
 
\t \t </div> 
 

 

 
     
 

 
     <button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button> 
 
     </div> 
 
    </form> 
 

 
    </ion-content> 
 

 
</body> 
 

 
</html>

是否无法保持复选框被选中？。我遇到的主要问题是我已经使用了与此处提供的相同的解决方案，但我想保留复选框选中状态。 –

添加代码现在检查复选框将不会删除...，在那里你可以添加任何勾选的背景图像为选中的复选框...玩CSS与标签你会得到这个结果...让我知道 – cna327

angularjs中的动态表单域

相关推荐