Angular-js：如何使用ng-ng與ng-if

我已經在angular JS中創建了一個聊天室，現在我想在任何用戶點擊時顯示通知氣泡。我試圖用ng-click和ng-if來使用它，但是失敗了。這裏是我使用Angular-js：如何使用ng-ng與ng-if

 <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泡沫，但我希望只有選定的用戶會顯示泡沫...

任何形式的幫助表示讚賞。在此先感謝

來源

2016-04-18 Sachin Bahal

是存在於所有用戶識別用戶的任何狀態？ –

您能否提供activateChat（）函數的實現？ – kyiu

如果WABT與NG-如果使用它：

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

請注意，我用按鈕改變DIV NG單擊，因爲我不知道whetver div元素支持Click事件，所以去按鈕或一個或選擇標籤。

來源

2016-04-18 08:58:23 Walfrat

感謝它的工作 –

我認爲一種選擇是爲您的視圖模型設置一個屬性，名爲，選中。在你的Angular控制器中，當你點擊一個用戶時，你應該把這個屬性的值設置爲true。

$scope.user.selected = true;

而且只顯示它是否已被選中

<span ng-show="user.selected" class="noti_bubble">{{user.bubbleCount}}</span>

來源

2016-04-18 08:59:19

嘗試關聯到特定用戶的鼓泡數這

<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-class="user != 0 ? 'noti_bubble' : ''"</span> 
        <span class="preview"></span> 
       </div> 
      </div> 
     </div>

來源

2016-04-18 09:26:43

仍然無法正常工作 –

Angular-js：如何使用ng-ng與ng-if

回答

相關問題