使用 angular 条件根据数组选择显示消息

Question

我无法从消息数组中获取要根据所选用户显示的消息。我目前能够在左侧显示所有消息，但它只需要根据右侧关联的用户在左侧显示所选消息。每个名字下方显示的消息，需要是点击用户名时左侧显示的消息。

控制器和指令

    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

Answer 1

这里是 an alternate that uses the $index of the ng-repeat，因此不需要在每条消息上都添加额外的属性。相反，控制器 $scope 有一个 shownMessage 属性。

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

Answer 2

要实现您需要的解决方案，请在单击 userName 时调用 usersList 指令上的方法并切换 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;
          }

        }
    }

});

Here is a Working DEMO

Answer 3

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

您现在可以将找到的项目绑定到您想要的位置

使用 angular 条件根据数组选择显示消息

Use angular conditional to display message based on array selection

arrays

angularjs

angular-ng-if

angular-directive