前陣子困擾了一個問題，想利用angular.js製作一個動態表單，可是這動態表單裡會使用到ng-repeat（select)
angular.js DOM上的處理與JQuery相比就稍稍有點不太同了，所以在此附上實作的code。（ng-contorller與angular基礎的設定就不貼上囉）
HTML
<div id="list" ng-repeat="(key, select) in selectArray track by $index">
<div>
<label>商品</label>
<select name="commodity[]" >
<option ng-repeat="(key, value) in commodity" value="{{value.id}}">{{value.commodity}}</option>
</select>
</div>
<!-- data-ng-if 影響下方新增跟刪除按鈕的出現 -->
<span ng-click="add_list()" data-ng-if="$first">
新增
</span>
<span data-ng-if="!$first" data-ng-click="remove($index)">
刪除
</span>
</div>
代碼整體上是很簡短的，重點就在於黃色區塊的ng-repeat selectArray是會對應到angular.js裡的$scope.selectArray。
然後在js段裡只要再給他設定為array之後再做push，就會產生出下一行新的資料。
新增與刪除的按鈕呈現，也請注意橘色區塊，這邊的意思是一個很簡單的判斷，判斷是否為第一個，是第一個即呈現，不是第二個即不呈現。
Angular.js
//json資料
$scope.commodity = [{
id : 1,
commodity : "First"
},{
id :2,
commodity : "Two"
},{
id :3,
commodity : "Three"
},{
id :4,
commodity : "Four"
}]
$scope.selectArray = [1];
$scope.add_list = function()
{
$scope.selectArray.push($scope.selectArray.length+1);
}
$scope.remove = function(index){
$scope.selectArray.splice(index,1)
}
最後刪除按鈕也是把selectArray使用上splice，就能成功刪除該行元素。
以上就是一個很簡單又實用的angular動態表單～！
留言列表
