AngularJs 在ng-repeat中動態使用ng-model進行雙向資料繫結
阿新 • • 發佈：2018-12-30
首先說明一下功能需求：
當點選一次增加按鈕的時候，下方就會多一行輸入框；
當點選一次刪除按鈕的時候，所點選的刪除按鈕那行的輸入框會消失；
當點選列印資訊按鈕的時候，把所有輸入框中的資料讀取出來，並列印到控制檯上。
由此可看出，帶有刪除按鈕的這部分DIV是動態的。
現在使用的是angularjs框架，那我們該如何去實現這樣的功能呢？
angularjs有個很強大的功能，那就是雙向資料繫結；
由此可以知道，我們就是要使用雙向資料繫結的特性來實現它。
思路是這樣的：
通過維護陣列的方式來實現。
首先在angular控制器中建立一個數組，像這樣：
$scope.showVBs = [];
當點選一次增加按鈕的時候，就執行一次下方的方法：
$scope.BDetailsAdd = function(){
$scope.showVBs.push({});
}當點選一次刪除按鈕的時候，就執行一次下方的方法：
$scope.BDetailsAdd = function(Count){
$scope.showVBs.splice(Count, 1);
}當點選一次列印按鈕的時候，就執行一次下方的方法:
通過遍歷陣列，取出裡面的值
html的程式碼如下：<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>
<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">
<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);
};