Question

我的表格带有输入字段和复选框以及两个按钮，按钮用于添加和删除。但我在这里想要删除添加按钮，并希望只显示复选框显示下一个字段。我怎么能这样做？

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>

Answer 1

移除添加按钮，然后将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中的动态表单字段

1 个答案: