Angular JS - Call a function every time an ng-repeat repeats

Question

I have a basic messaging service that will only show someone a message if it is sent to them. So I have an array containing strings of the names of the participants in these conversations. What I want is an ng-show to show the comment if the person's username is in the array. But, because there are lots of messages, I have an ng-repeat that goes through them. This means that I will have to execute the function which determines whether someone is in a chat every time the ng-repeat repeats. Does anyone have any ideas? Thanks.

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

I have tried executing a function in the ng-show - it's called, but I can't get the result into the ng-show afterwards.

I have tried an ng-init, which didn't do anything.

Please explain more and show what you've tried or the structures you are using. — Jason Goemaat
– Jason Goemaat, Commented Mar 26, 2015 at 5:08
In the code above, there is a function, this.authorize(), which is what I want to run. — Oliver
– Oliver, Commented Mar 26, 2015 at 5:23
It makes little sense that you'll have one authorized boolean parameter that will get overwritten on every iteration. — Omri Aharon
– Omri Aharon, Commented Mar 26, 2015 at 6:19

Huy Hoang Pham · Accepted Answer · 2015-03-26 06:24:09Z

In my opinion, a simple solution is: You just have to filter the "messages" array, and then call the ng-repeat with the filtered messages array.

For example, the code below displays all the messages belonged to 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>

Actually, you have a good point there @Huy, I never thought of sorting all the messages beforehand.

Collectives™ on Stack Overflow

Angular JS - Call a function every time an ng-repeat repeats

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related