首页 > 代码库 > Angular-表单动态添加删除
Angular-表单动态添加删除
angular本身不允许去操作DOM，在angular的角度来说，所有操作都以数据为核心，剩下的事情由angular来完成。所以说，想清楚问题的根源，解决起来也不是那么困难。
前提
那么，要做的这个添加删除要具有以下功能：
1、当数据只剩一条时，不允许删除；
2、第一条数据不允许修改和删除；
3、可以动态设置添加最大条数（例中设置为4条）。
首先，用bootstrap布局一个可以添加和删除的操作界面：
<body ng-app="App"> <form class="form-horizontal" ng-controller="index"> <label class="col-sm-2 control-label">绑定域名:</label> <div class="col-sm-10"> <div ng-repeat="domain in info.operate"> <div class="form-group"> <label class="control-label col-sm-1" for="domain{{$index + 1}}">域名{{$index + 1}}</label> <div class="col-sm-9"> <input type="text" id="domain{{$index + 1}}" class="form-control" ng-model="domain.value" name="domain{{$index + 1}}" ng-disabled="!$index" /> </div> <div class="col-sm-2"> <button class="btn btn-default" type="button" ng-disabled="info.operate.length >= 4" ng-click="info.add($index)">+</button> <button class="btn btn-default" type="button" ng-click="info.delete($index)" ng-show="$index">-</button> </div> </div> </div> </div> <div class="col-sm-offset-3"><button type="button" class="btn btn-primary" ng-click="info.result()">结果</button></div> </form></body>
然后，需要的是用angular操作数据完成以上功能：
var app = angular.module(‘App‘, []);app.controller(‘index‘, function($scope, $log) { $scope.info = {}; $scope.info.operate = []; // 假设这是数据来源 var simp = ["www.baidu.com"]; angular.forEach(simp, function(data, index) { $scope.info.operate.push({key: index, value: data}); }); // 增加 $scope.info.add = function($index) { $scope.info.operate.splice($index + 1, 0, {key: $index + 1, value: ""}); }; // 删除 $scope.info.delete = function($index) { $scope.info.operate.splice($index, 1); }; // 结果 $scope.info.result = function() { var result = []; angular.forEach($scope.info.operate, function(data) { result.push(data.value); }); $log.debug(result); };});
至此，功能编写完毕，具体效果如图：
当然，这只是一个简单的输入例子，并没有做诸如输入框必填等功能。
Angular-表单动态添加删除
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。