您的位置：首页 > Web前端 > AngularJS

AngularJs学习——实现列表内容项的增加删除

2016-04-13 22:37 711 查看

效果截图：

说明：引入bootstrap.min.css样式库和angular.min.js的静态资源库，实现列表内容的增加和删除操作。

AngularJS[b]代码：[/b]

<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[b]代码：[/b]

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航