Question

我正在尝试使用Angular.JS在聊天页面上创建用户列表。我想让用户在列表顶部看到自己的名字。我想通过以下两种方式实现这一目标：

A）从列表中删除用户自己的名字，然后在其他地方打印用户名。
OR
B）将用户名称推送到无序列表的顶部（您在列表顶部看到自己的名称。）

以下是相关代码：

ChatCtrl.js

function ($scope, $log, socket, personService) {
   // ..........
        $scope.person = personService.getPerson();

    // personService is a service which gather info each time a person logs in

        socket.emit('people-join-server', {
            user: $scope.person.name,
            interests: $scope.person.interests
        });     


        socket.on("update-people", function(data) {

            $scope.people = data.people;
            $scope.count = data.count;              
            $scope.$digest();
        });
  // ..........
    }

Socket.js

var _ = require('underscore')._;

// the io argument comes from the root app.js file
module.exports = function (io) {
    var people = {};
    var sockets = [];
    var sizePeople = _.size(people);

    io.sockets.on('connection', function(socket){

        socket.on('people-join-server', function (data) {
            people[socket.id] = {"user": data.user, "interests": data.interests};

            io.sockets.emit('update-people', {people: people, count: sizePeople});
        });
    // ........
    }
};

chat_page.html

 <ul>               
    <li ng-repeat="peeps in people">
        <span>{{peeps.user}}</span>
    </li>
  </ul>

Answer 1

为什么不在ng标签上加上ng-show：

    <ul>
        {{person.name}}
        <li ng-repeat="peeps in people" ng-show="peeps.user!=person.name">
            <span>{{peeps.user}}</span>
        </li>
    </ul>

这可能会消除空白问题。

Answer 2

所以我几乎得到了答案，您可以通过向包含{{peeps.user}}的span元素添加ng-show条件来操纵chat_page.html文件，如下所示：

        <ul>
            {{person.name}}
            <li ng-repeat="peeps in people">
                <span ng-show="peeps.user!=person.name">{{peeps.user}}</span>
            </li>
        </ul>

如您所见，我使用{{person.name}}变量在顶部拥有用户自己的名称，然后使用{{peeps.user}}变量打印出其余名称。

我现在唯一的问题是我的名字曾经是一个空格，所以现在打印一个列表项而不是用户的名字。

AngularJS - 从无序列表中省略用户

2 个答案: