I'm creating a chat box
当我点击该人的数据表时，它必须显示聊天框，显示我点击的人的姓名。
我的问题是我无法显示单个人的姓名，并且附加div无法正常工作。当我点击数据表时，必须打开一个聊天框，显示该人的姓名
以下是plunker
<div class="content-wrapper" ng-controller="ListController">
<section class="content" ng-controller="MainCtrl">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Visitors List</h3>
<div class="box-tools">
<div class="input-group">
<input type="text" name="table_search"
ng-model="query" class="form-control
input-sm pull-right" style="width: 150px;"
placeholder="Search"/>
<div class="input-group-btn">
<button class="btn btn-sm btn-default">
<i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<div id="divID"></div>
<table class="table table-hover" >
<tr>
<th>Name</th>
<th>Profile</th>
<th>First Name</th>
<th>Date</th>
<th>Status</th>
<th>Reknown</th>
</tr>
<tr ng-repeat="item in artists | filter: query |
orderBy: artistOrder:direction" id="table-cursor">
<td ng-click="AppendText($index)">{{item.name}}</a>
</td><td ng-click="AppendText($index)"><span value="
{{artists.indexOf(item)}}">
</span><img ng-src="images/{{item.shortname}}_tn.jpg"
width="35" height="35" alt="profile"></td>
<td ng-click="AppendText($index)"><h5>
{{item.shortname}}</h5></td>
<td ng-click="AppendText($index)">11-7-2014</td>
<td ng-click="AppendText($index)">
<span class="label label-success">Approved</span></td>
<td ng-click="AppendText($index)">{{item.reknown}}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
//controller
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
var artistControllers = angular.module('artistControllers', []);
myApp.controller('ListController', ['$scope', '$http', '$routeParams',
function($scope, $http, $routeParams) {
$http.get('angular/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
$scope.whichItem = $routeParams.itemId;
});
}
]);
myApp.controller('MainCtrl', ['$scope', '$http', '$routeParams',
function($scope, $http, $routeParams) {
$http.get('angular/data.json').success(function(data) {
$scope.artists = ;
$scope.whichItem = $routeParams.itemId;
$scope.AppendText = function(idx) {
$scope.userInfo = $scope.artists[idx];
//alert(idx);
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append(//'<div class="col-md-3">' +
'<div class="col-md-3" id="chatboxcorner">' +
'<div class="box box-warning direct-chat direct-chat-warning">'
+'<div class="box-header with-border">' +
'<div class="box-tools pull-right">' +
'<span data-toggle="tooltip" title="3 New Messages"
class="badge bg-yellow">3</span>' +
'<button class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i></button>' +
'<button class="btn btn-box-tool" data-toggle="tooltip"
title="Contacts" data-widget="chat-pane-toggle">
<i class="fa fa-comments"></i></button>' +
'<button class="btn btn-box-tool" data-widget="remove">
<i class="fa fa-times"></i></button></div></div><div>' +
'<p>' + idx +'</p>
<img ng-src="images/{{userInfo.shortname}}_tn.jpg" width="35"
height="35" alt="profile">' +
'</div><div class="box-footer"><form><div class="input-group">' +
'<input type="text" name="message" placeholder="Type Message ..."
class="form-control"/>' +
'<span class="input-group-btn">
<button type="button" class="btn btn-warning btn-flat">
Send</button>' +
'</span></div></form></div></div></div>'
);
}
});
}
]);
// json file
[{
"name": "Barot Bellingham",
"shortname": "Barot_Bellingham",
"reknown": "Royal Academy of Painting and Sculpture",
"bio": "Barot has just finished his final year at The Royal Academy of"
}, {
"name": "Jonathan G. Ferrar II",
"shortname": "Jonathan_Ferrar",
"reknown": "Artist to Watch in 2012",
"bio": "The Artist to Watch in 2012 by the London Review, Johnathan has"
}, {
"name": "Hillary Hewitt Goldwynn-Post",
"shortname": "Hillary_Goldwynn",
"reknown": "New York University",
"bio": "Hillary is a sophomore art sculpture student at New York"
}, {
"name": "Hassum Harrod",
"shortname": "Hassum_Harrod",
"reknown": "Art College in New Dehli",
"bio": "The Art College in New Dehli has sponsored Hassum on
scholarship"
}, {
"name": "Jennifer Jerome",
"shortname": "Jennifer_Jerome",
"reknown": "New Orleans, LA",
"bio": "A native of New Orleans, much of Jennifer's work has centered"
}, {
"name": "LaVonne L. LaRue",
"shortname": "LaVonne_LaRue",
"reknown": "Chicago, IL",
"bio": "LaVonne's giant-sized paintings all around Chicago tell the "
}, {
"name": "Constance Olivia Smith",
"shortname": "Constance_Smith",
"reknown": "Fullerton-Brighton-Norwell Award",
"bio": "Constance received the Fullerton-Brighton-Norwell Award for "
}, {
"name": "Riley Rudolph Rewington",
"shortname": "Riley_Rewington",
"reknown": "Roux Academy of Art, Media, and Design",
"bio": "A first-year student at the Roux Academy of Art, Media, and "
}, {
"name": "Xhou Ta",
"shortname": "Xhou_Ta",
"reknown": "China International Art University",
"bio": "A senior at the China International Art University, Xhou has "
}]
'