您的位置：首页 > Web前端 > AngularJS

第13篇：Angular-表单动态添加删除

2017-07-12 16:28 288 查看

原文：http://webserver.300364.net/show/11019444150761540564.html

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);
};
});

当然，这只是一个简单的输入例子，并没有做诸如输入框必填等功能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航