AngularJS 新增/刪除物件

AngularJS 跟 jQuery 的新增/刪除列表的方式很不一樣，他只要控制 json array 的內容就可以了。

準備 html

view plaincopy to clipboardprint

1. <div>  
2.     <input type="text" ng-model="new_ip"> <button ng-click="add_ip()">新增</button>  
3. </div>  
4. <ul>  
5.     <li ng-repeat="ip in iplist"><span>{{ip.ip}}</span><button ng-click="removeIp($index)">remove</button></li>                   
6. </ul>  

這邊我想要新增一組 ip ，只要按刪除就從列表移除。

準備一個json array 來存列表，如果沒有預設值就用空陣列。

view plaincopy to clipboardprint

1. $scope.iplist= [];  

新增 ip 的話則是抓 input 內的值，再塞到 json array 內就好了。

view plaincopy to clipboardprint

1. $scope.add_ip=function(){   
2.     $scope.iplist.push({ip: $scope.new_ip});   
3.     $scope.new_ip="";   
4. }  

刪除的話一樣從 json array 內刪除要刪除的那個，html 就會自動少了那一項。

view plaincopy to clipboardprint

1. $scope.removeIp=function(item){   
2.     var $index=$scope.iplist.indexOf(item);   
3.     $scope.iplist.splice($index,1);     
4. }  

Demo