使用角度條件來顯示基於陣列選擇的消息

我無法從消息陣列中獲取消息以基於所選用戶進行顯示。我目前能夠顯示左側的所有消息，但只需在右側顯示選定的消息（基於右側的用戶）。在每個名稱下方顯示的消息需要是單擊用戶名時左側顯示的消息。使用角度條件來顯示基於陣列選擇的消息

控制器和指令

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

來源

2017-05-29 Matt

達到你所需要的解決方案，在userName點擊時呼籲usersList指令的方法和切換message

我已在指令中toggleDetails()方法。

<h5 ng-click='toggleDetails(message)'>{{message.user}}</h5>

這裏是相同

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; 
      } 

     } 
    } 

});

Here is a Working DEMO

來源

2017-05-29 05:52:29 Sravan

這裏的an alternate that uses the $index of the ng-repeat所以沒有需要每條消息的額外屬性。相反，控制器$scope具有shownMessage屬性。

ng-repeat='message in messages' ng-if='shownMessage === $index'

來源

2017-05-29 05:31:10

丫找到的項目代碼snippet，我試圖找出如何使用這個過濾器。這只是它，但它只需要顯示當前選擇的用戶消息，並且不允許顯示上一個和下一個選定的用戶消息。 – Matt

var selectedUser;//get when user clicked 
var selectedUserMessages=angular.filter('filter')($scope.messages, 
{user:selectedUser});

您現在可以綁定你想要

來源

2017-05-29 07:39:24

使用角度條件來顯示基於陣列選擇的消息

回答

相關問題