AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定
首先说明一下功能需求:
当点击一次增加按钮的时候,下方就会多一行输入框;
当点击一次删除按钮的时候,所点击的删除按钮那行的输入框会消失;
当点击打印信息按钮的时候,把所有输入框中的数据读取出来,并打印到控制台上。
由此可看出,带有删除按钮的这部分DIV是动态的。
现在使用的是angularjs框架,那我们该如何去实现这样的功能呢?
angularjs有个很强大的功能,那就是双向数据绑定;
由此可以知道,我们就是要使用双向数据绑定的特性来实现它。
思路是这样的:
通过维护数组的方式来实现。
首先在angular控制器中创建一个数组,像这样:
$scope.showVBs = [];
当点击一次增加按钮的时候,就执行一次下方的方法:
$scope.BDetailsAdd = function(){
$scope.showVBs.push({});
}
当点击一次删除按钮的时候,就执行一次下方的方法:
$scope.BDetailsAdd = function(Count){
$scope.showVBs.splice(Count, 1);
}
当点击一次打印按钮的时候,就执行一次下方的方法:
通过遍历数组,取出里面的值
<p><span style="font-family: 'Anonymous Pro';"><span style="font-size:12px;">$scope.printInfo = function () {</span></span></p><pre name="code" class="html"><span style="font-size:12px;"> for (var i = 0; i < $scope.showVBs.length; i++) {
console.log($scope.showVBs[i]);
}
};</span>
html的代码如下:
<div class="row panel panel-default panel-body">
<div class="col-md-offset-1 panel panel-default">
<label>{{'Details'}}</label>
<input type="button" class="btn btn-info" value="增加" ng-click="BDetailsAdd()">
<input type="button" class="btn btn-danger" value="打印信息" ng-click="printInfo()">
</div>
<div class="vBaggages" ng-repeat="vba in showVBs">
<div class="form-group col-md-2 col-md-offset-1">
<input type="button" class="btn btn-info" value="删" ng-click="BDetailsDel($index)">
<input type="text" class="form-control pull-right" ng-model="vba.Tag"
placeholder="Tag" style="width:70%">
</div>
<div class="form-group col-md-2 col-md-offset-1">
<input type="text" class="form-control pull-right" ng-model="vba.NO"
placeholder="No.">
</div>
<div class="form-group col-md-5 col-md-offset-1">
<input type="text" class="form-control pull-right" ng-model="vba.remarks"
placeholder="Remarks">
</div>
</div>
</div>
完整的源码:
<!docype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html ng-app="App">
<head>
<title>index</title>
<link rel="stylesheet" href="script/bootstrap/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="script/angular/angular.min.js"></script>
<script type="text/javascript" src="script/app/appCtrl.js"></script>
</head>
<body ng-controller="EditCtrl">
<form role="form" name="editForm">
<div class="row">
<div class="col-md-12">
<div class="row panel panel-default panel-body">
<div class="col-md-offset-1 panel panel-default">
<label>{{'Details'}}</label>
<input type="button" class="btn btn-info" value="增加" ng-click="BDetailsAdd()">
<input type="button" class="btn btn-danger" value="打印信息" ng-click="printInfo()">
</div>
<div class="vBaggages" ng-repeat="vba in showVBs">
<div class="form-group col-md-2 col-md-offset-1">
<input type="button" class="btn btn-info" value="删" ng-click="BDetailsDel($index)">
<input type="text" class="form-control pull-right" ng-model="vba.Tag"
placeholder="Tag" style="width:70%">
</div>
<div class="form-group col-md-2 col-md-offset-1">
<input type="text" class="form-control pull-right" ng-model="vba.NO"
placeholder="No.">
</div>
<div class="form-group col-md-5 col-md-offset-1">
<input type="text" class="form-control pull-right" ng-model="vba.remarks"
placeholder="Remarks">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</pre><pre name="code" class="html">/**
* Created by wzs on 2015/9/6 0006.
*/
var App = angular.module('App', [])
App.controller('EditCtrl', ['$scope', function ($scope) {
//================测试代码段================
$scope.printInfo = function () {
for (var i = 0; i < $scope.showVBs.length; i++) {
console.log($scope.showVBs[i]);
}
};
$scope.showVBs = [{
"Tag": "Tag1",
"NO": "No1",
"remarks": "remarks1"
}, {
"Tag": "Tag2",
"NO": "No2",
"remarks": "remarks2"
}];
$scope.BDetailsAdd = function () {
$scope.showVBs.push({});
};
$scope.BDetailsDel = function (Count) {
$scope.showVBs.splice(Count, 1);
};