简单聊天机器人
很初级的对话框形式。以前做对话框使用js,今天尝试使用AngularJS做出来
这里直接使用自己写的JSON数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} h3 {
text-align: center;
} .chatbox {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #CCC;
background-color: #FFF;
border-radius: 5px;
} .messages {
height: 350px;
padding: 20px 40px;
box-sizing: border-box;
border-bottom: 1px solid #CCC;
overflow: scroll;
} .messages h5 {
font-size: 20px;
margin: 10px 0;
} .messages p {
font-size: 18px;
margin: 0;
}
/*自己说*/ .self {
text-align: left;
}
/*对方说*/ .other {
text-align: right;
} .form {
height: 150px;
} .form .input {
height: 110px;
padding: 10px;
box-sizing: border-box;
} .form .btn {
height: 40px;
box-sizing: border-box;
border-top: 1px solid #CCC;
} .form textarea {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: none;
/*宽度不发生变化*/
resize: none;
outline: none;
font-size: 20px;
} .form input {
display: block;
width: 100px;
height: 30px;
margin-top: 5px;
margin-right: 20px;
float: right;
}
</style>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module('chatRoot', []);
App.controller('chatRootController', ['$scope', '$http', function ($scope, $http) { $scope.messages = [];
$scope.send = function () {
var message = {text: $scope.message, role: '我说', cls: 'self' }
$scope.messages.push(message);
$scope.message = '';
$http({
url: 'chatRoot.php',
method: 'post',
headers: {
'Content-Type':'application/x-www-form-urlencoded'
},
}).success(function (info) {
console.log(info);
message = {text: info, role: '鸣人说', cls: 'other' }
$scope.messages.push(message);
});
}
}]);
</script>
</head>
<body ng-app="chatRoot">
<h3>简单的AngularJS实例</h3>
<div class="chatbox" ng-controller="chatRootController">
<!-- 聊天内容 -->
<div class="messages">
<div class="{{message.cls}}" ng-repeat='message in messages'>
<h5>{{message.role}}</h5>
<p>{{message.text}}</p>
</div>
</div>
<!-- 表单 -->
<div class="form">
<!-- 输入框 -->
<div class="input">
<textarea ng-model='message'></textarea>
</div>
<!-- 按钮 -->
<div class="btn" ng-click = 'send()'>
<input type="button" value="发送">
</div>
</div>
</div>
</body>
</html>