Question

我有一个基本的消息服务，只有在向他们发送消息时才向他人显示消息。所以我有一个数组，其中包含这些对话中参与者姓名的字符串。我想要的是一个ng-show，用于显示该人的用户名是否在数组中。但是，因为有很多消息，我有一个经过它们的ng-repeat。这意味着我必须执行该功能，该功能确定每次重复ng重复时是否有人在聊天。有没有人有任何想法？感谢。

＆＃13;

.msghead{
    text-decoration: underline;
}
.thread{
    border: 1px solid black;
    padding: 10px 10px;
    overflow: hidden;
    cursor: hand;
    width: 99%;
}
body{
    margin: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Messaging' ng-controller='MessagingCtrl as Messaging'>
    <div ng-repeat='threads in Messaging.messages' class='thread' ng-show='Messaging.authorized'>
    <p ng-repeat='msgs in threads.message'>
        <span class='msghead'> {{ msgs.author }} </span><br>
        {{ msgs.msg }} <br>
    </p>
    </div>
</div>
<script>
    var app = angular.module('Messaging',[]);
    app.controller('MessagingCtrl',function(){
        this.messages = [
            {
                members: ['Bob','Jeff'],
                message: [
                    {
                        author: 'Bob',
                        msg: 'Hello and welcome to this messaging service.'
                    },
                    {
                        author: 'Jeff',
                        msg: 'Great work! Very impressive, Bob!'
                    },
                ]
            },
            {
                members: ['Bob','Jeff','Dan'],
                message: [
                    {
                        author: 'Bob',
                        msg: 'Hello and welcome to this messaging service. This is another thread!'
                    },
                    {
                        author: 'Dan',
                        msg: 'Great work! Very impressive, Bob!'
                    },
                    {
                        author: 'Jeff',
                        msg: 'Stop copying me!'
                    },
                ]
            },
        ];
        this.authorize = function(){
            for(var count = 0;count < this.messages.length;count++){
                if(this.messages[count] === this.name){
                    this.authorized = false;
                }
                if(count === this.messages.length){
                    this.authorized = true;
                }
            }
        }
        this.name = 'Bob';
        this.authorized = true;
    });
</script>

＆＃13;

我已经尝试在ng-show中执行一个函数 - 它被调用了，但之后我无法将结果输入到ng-show中。

我尝试过ng-init，但没有做任何事情。

Answer 1

在我看来，一个简单的解决方案是：你只需要过滤“messages”数组，然后用过滤后的消息数组调用ng-repeat。

例如，下面的代码显示了所有属于Dan的消息

 var app = angular.module('Messaging', []);
 app.controller('MessagingCtrl', function() {
   this.messages = [{
     members: ['Bob', 'Jeff'],
     message: [{
       author: 'Bob',
       msg: 'Hello and welcome to this messaging service.'
     }, {
       author: 'Jeff',
       msg: 'Great work! Very impressive, Bob!'
     }, ]
   }, {
     members: ['Bob', 'Jeff', 'Dan'],
     message: [{
       author: 'Bob',
       msg: 'Hello and welcome to this messaging service. This is another thread!'
     }, {
       author: 'Dan',
       msg: 'Great work! Very impressive, Bob!'
     }, {
       author: 'Jeff',
       msg: 'Stop copying me!'
     }, ]
   }, ];

   //Filter the messages array. 
   //Only get the massage with membems contains Dan
   this.filteredMessages = this.messages.filter(function(mes) {
     return mes.members.indexOf('Dan') != -1;
   });
 });

.msghead {
  text-decoration: underline;
}
.thread {
  border: 1px solid black;
  padding: 10px 10px;
  overflow: hidden;
  cursor: hand;
  width: 99%;
}
body {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Messaging' ng-controller='MessagingCtrl as Messaging'>
  <div ng-repeat='threads in Messaging.filteredMessages' class='thread'>
    <p ng-repeat='msgs in threads.message'>
      <span class='msghead'> {{ msgs.author }} </span>
      <br>{{ msgs.msg }}
      <br>
    </p>
  </div>
</div>

Angular JS - 每次重复ng重复时调用一个函数

1 个答案: