<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset='utf-8'/>
<title>lesson5_angularJS评论案例</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<br/><br/><br/>
<div class="container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<!-- 评论模块 -->
<div class="input-group">
<input type="text" class="form-control" ng-model='comt'>
<span class='input-group-btn'>
<button class="btn btn-primary" ng-click='submitComment(comt)'>评论</button>
</span>
</div>
<!-- 评论标题 -->
<h2 ng-show='commentArr.length>0'>评论</h2>
<!-- 评论内容 -->
<ul class="list-group">
<li class="list-group-item" ng-repeat='comment in commentArr track by $index'>
<span>{{comment}}</span>
<a href="javascript:;" class="btn btn-link" ng-click='deleteComment($index)'>删除本条评论</a>
</li>
</ul>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<script src='angular.js'></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope){
$scope.commentArr = [];
//评论功能
$scope.submitComment = function (comt){
$scope.commentArr.push(comt);
$scope.comt = '';
};
//删除评论
$scope.deleteComment = function (index){
$scope.commentArr.splice(index, 1);
};
}]);
</script>
</body>
</html>
注意：需要外部引入bootstrap.min.css样式文件
