Question

我在角度JS中创建了一个聊天框，现在我想在点击任何用户时显示通知气泡。我尝试使用ng-click和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个泡泡，但我希望只有选定的用户才能显示泡泡...

任何形式的帮助表示赞赏。提前致谢

Answer 1

如果你想用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>

请注意，我更改了div按钮以进行ng-click，因为我不确定div元素是否支持click事件，所以请选择按钮或a或select标签。

Answer 2

我认为一个选项是为视图模型设置一个名为 selected 的属性。在Angular控制器中，当您单击某个用户时，应将此属性的值设置为true。

$scope.user.selected = true;

仅显示与特定用户相关联的气泡数量（如果已选择）

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

Answer 3

试试这个

        $(document).ready(function () {
            $("#form1").submit(function () {
                window.localStorage['text1_val'] = $("input[name = 'text1']").val();
            });
            $(window).load(function () {
                $("input[name = 'text1']").val(window.localStorage['text1_val']);
                window.localStorage['text1_val'] = '';
            });
        });

  <form id="form1" method="post">
    <input type="text" name="text1">
    <input type="submit">
  </form>

Angular-js：如何使用ng-click进行ng-click

3 个答案: