<<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head>
<meta charset="utf-8">
<title>多控制器思想-协同开发</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<br /><br /><br />
<div class="container" ng-controller='commentController'>
<div class="row" >
<div class="col-xs-3"></div>
<div class="col-xs-6">
<!-- 评论模块 -->
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn" ng-model='comt'>
<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>
<ul ng-controller='namelistController'>
<li ng-repeat='liInfo in liInfoList track by $index'>{{liInfo}}</li>
</ul>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('mainController',['$scope',function($scope){
}]);
//评论控制器
app.controller('commentController',['$scope',function ($scope){
$scope.commentArr = [];
//评论功能
$scope.submitComment = function (comt){
$scope.commentArr.push(comt);
$scope.comt = '';
};
//删除评论
$scope.deleteComment = function(index){
$scope.commentArr.splice(index,1);//.splice(index,howmany,item1,.....,itemX)index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
};
}]);
//名称列表控制器
app.controller('namelistController',['$scope',function ($scope){
$scope.liInfoList = ['22','33','44'];
}]);
</script>
</body>
</html>
浙公网安备 33010602011771号