Reputation: 1644
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.
Upvotes: 0
Views: 935
Reputation: 4147
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>
Upvotes: 2