2014年1月2日 星期四

AngularJS 新增/刪除物件

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

準備 html
  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 來存列表,如果沒有預設值就用空陣列。
  1. $scope.iplist= [];  

新增 ip 的話則是抓 input 內的值,再塞到 json array 內就好了。
  1. $scope.add_ip=function(){   
  2.     $scope.iplist.push({ip: $scope.new_ip});   
  3.     $scope.new_ip="";   
  4. }  

刪除的話一樣從 json array 內刪除要刪除的那個,html 就會自動少了那一項。
  1. $scope.removeIp=function(item){   
  2.     var $index=$scope.iplist.indexOf(item);   
  3.     $scope.iplist.splice($index,1);     
  4. }  

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...