我无法根据所选用户从消息数组中获取消息。我目前能够在左侧显示所有消息,但它只需要在左侧显示所选消息,具体取决于右侧与之关联的用户。显示每个名称下方的消息需要是单击用户名时左侧显示的消息。
控制器和指令
var movieApp = angular.module("movieApp",[]);
movieApp.controller("movieController",function($scope){
$scope.messages = [{
user:"aleksandra",
message:"this is aleksandras message"
},
{
user:"evan",
message:"this is evan message"
},
{
user:"tom",
message:"this is toms message"
},
{
user:"jarid",
message:"this is jarids message"
}];
$scope.response = [];
$scope.sendMessage = function(response){
$scope.toggle = $scope.toggle;
$scope.response.push(response);
console.log(response);
};
});
movieApp.directive("usersList", function(){
return {
restrict: "E",
scope: false,
template: "<p>Users</p>"+
"<ol class='list-unstyled animated fadeInDown'>"+
"<li ng-repeat='message in messages'>"+
"<h5 ng-click='showDetails = ! showDetails'>{{message.user}}</h5>"+
"<div ng-show='showDetails'>"+
"<p>{{message.message}}</p>"+
"</div>"+
"</li>"+
"</ol>"
};
});
movieApp.directive("messagesList", function(){
return {
restrict: "E",
scope: false,
template: "<div class='panel panel-primary'>"+
"<div class='panel-heading'>"+
"<span class='glyphicon glyphicon-comment'></span> Chat</div>"+
"<div class='panel-body body-panel'>"+
"<ol class='list-unstyled'>"+
"ONLY SHOW THE MESSAGE FOR THE USER SELECTED ON THE RIGHT"+
"<li ng-repeat='message in messages'>"+
"<p>{{message.message}}</p>"+
"</li>"+
"</ol>"+
"</div>"+
"<div class='panel-footer clearfix'>"+
"<form name='form'>"+
"<input type='text' name='message' ng-model='response' class='form-control' />"+
"<span class='col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12' style='margin-top: 10px'>"+
"<button class='btn btn-warning btn-lg btn-block' id='btn-chat' ng-click='sendMessage(messages)' ng-disabled='!form.message.$dirty'>Send</button>"+
"</span>"+
"</form>"+
"</div>"+
"</div>"
};
});
标记
<div ng-controller="chatController">
<div class="container">
<div class="row">
<div class="col-xs-9">
<messages-list></messages-list>
</div>
<div class="col-xs-3">
<users-list></users-list>
</div>
</div>
</div>
</div>
当前的Plunker:Link
答案 0 :(得分:1)
要获得所需的解决方案,请在点击usersList
时调用userName
指令上的方法并切换message
我在指令上采用了toggleDetails()
方法。
<强> <h5 ng-click='toggleDetails(message)'>{{message.user}}</h5>
强>
以下是相同
的代码snippet
chatApp.directive("usersList", function(){
return {
restrict: "E",
scope: false,
template: "<p>Users</p>"+
"<ol class='list-unstyled animated fadeInDown'>"+
"<li ng-repeat='message in messages'>"+
"<h5 ng-click='toggleDetails(message)'>{{message.user}}</h5>"+
"<div ng-show='message.showDetails'>"+
"<p>{{message.message}}</p>"+
"</div>"+
"</li>"+
"</ol>"
,
link: function(scope) {
scope.toggleDetails = function(message)
{
angular.forEach(scope.messages, function(value, key){
if(message != value)
value.showDetails = false;
});
message.showDetails = !message.showDetails;
}
}
}
});
答案 1 :(得分:0)
此处an alternate that uses the $index of the ng-repeat因此不需要在每条消息上添加额外属性。相反,控制器$scope
具有shownMessage
属性。
ng-repeat='message in messages' ng-if='shownMessage === $index'
答案 2 :(得分:0)
var selectedUser;//get when user clicked
var selectedUserMessages=angular.filter('filter')($scope.messages,
{user:selectedUser});
您现在可以将找到的项目绑定到您想要的位置