效果截圖：
說明：引入bootstrap.min.css樣式庫和angular.min.js的靜態資源庫，實現列表內容的增加和刪除操作。
AngularJS代碼：
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module('myapp',[])
.controller('myctrl',function($scope){
$scope.item = '';
$scope.items = [];
//增加列表項方法
$scope.add = function(){
$scope.items.push($scope.item);
}
})
</script>
HTML代碼：
<!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>AngularJS實現列表內容項的增加、刪除</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"/> </head> <body style="padding: 20px"> <div class="container" ng-controller="myctrl"> <div class="row"> <div class="col-md-offset-2 col-md-5"> <div class="input-group"> <input type="text" class="form-control" ng-model="item"> <span class="input-group-btn"> <button class="btn btn-primary" ng-click="add()">增加內容</button> </span> </div> </div> </div> <div class="row"> <div class="col-md-offset-2 col-md-5"> <h6 style="margin-top: 10px;" ng-if="items.length>0">列表內容：</h6> <div class="list-group"> <div class="list-group-item" ng-repeat="item in items track by $index"> {{item}} <a href="#" ng-click="items.splice($index,1)">刪除</a> </div> </div> </div> </div> </div> </body> </html>