Angular-js:如何在ng-if中使用ng-click [英] Angular-js: How to use of ng-click with ng-if
问题描述
我已经在angular JS中创建了一个聊天框,现在我想在单击任何用户时显示通知气泡.我尝试将其与ng-click和ng-if一起使用,但失败了. 这是我正在使用的代码
I have created a chatbox in angular JS and now I want to show notification bubble when ever I click on any user. I tried to use this with ng-click and and ng-if but failed. Here is the code I am using
<div class="people" >
<div ng-repeat="user in allCompanyUsers">
<div class="person" ng-click="activateChat(user)" id="chat_{{user.id}}">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-show="!user.showNotification" class="noti_bubble">5</span>
<span class="preview"></span>
</div>
</div>
</div>
在控制器端:
$scope.showNotification = false;
$scope.allCompanyUsers = AllCompanyUsers.query();
$scope.activateChat = function(user){
console.log(user);
$scope.activeConversations = [];
UserMessages.query({toUser:user.login}).$promise.then(function(data) {
angular.forEach(data, function(message) {
$scope.activeConversations.push({'message':message.message,'type':message.type, 'time': message.time});
});
});
$scope.activePerson=user.login;
$scope.showNotification = true;
$scope.isDisabled=true;
/*$scope.activeConversations=user.chat;*/
$('.left .person').removeClass('active');
var el = angular.element( document.querySelector('#chat_'+user.id));
el.addClass('active');
};
当前,该计数是硬编码的. 这里所有用户都显示5个气泡,但我希望只有选中的用户才能显示气泡...
Currently the count is hardcoded. Here All users are showing with 5 bubble but I want that only selected user will show the bubble...
任何帮助都将受到赞赏.预先感谢
any kind of help is appreciated. Thanks in advance
推荐答案
如果您想将其与ng-if一起使用:
If you wabt to use it with ng-if :
<div ng-if="bubble">
//bubble code : set bubble to false when it close
// use currentUser variable
</div>
<button ng-click="currentUser = user;bubble=true"></button>
请注意,我为ng-click更改了按按钮的div,因为我不确定whetver div元素是否支持click事件,因此请选择button或a或select标记.
Note that i changed div by button for ng-click, because i'm not sure whetver div element support click event, so go for button or a or select tag.
这篇关于Angular-js:如何在ng-if中使用ng-click的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!