CODEWITHSUNDEEP
angularjsarraysangular-directiveangular-ng-if
Matt
Matt

Reputation: 1609

Use angular conditional to display message based on array selection

I'm having trouble getting the messages from the messages array to display based on the user selected. I'm currently able to show all of the messages on the left side, but it needs to only show the selected message on the left, based on the user associated with it on the right. The message showing below each name, needs to be the message showing on the left when clicking the username.

the controller and directives

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

markup

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

Current Plunker: Link

Upvotes: 0

Views: 1057

Answers (3)

Ramin Farajpour
Ramin Farajpour

Reputation: 417

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

you can now bind the found items where you want

Upvotes: 0

logan rakai
logan rakai

Reputation: 2557

Here's an alternate that uses the $index of the ng-repeat so there isn't a need for the extra property on each message. Instead the controller $scope has a shownMessage property.

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

Upvotes: 0

Sravan
Sravan

Reputation: 18647

To achieve the solution you needed, call a method on usersList directive when clicked on userName and toggle the message

I have taken a toggleDetails() method on the directive.

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

Here is a code snippet for the same

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

Upvotes: 1

Related Questions