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

【问题标题】：AngularJS - Omitting user from an unordered listAngularJS - 从无序列表中省略用户
【发布时间】：2014-11-28 15:07:20
【问题描述】：

我正在尝试使用 Angular.JS 在聊天页面上创建用户列表。我想让用户在列表顶部看到他自己的名字。我想通过以下任一方式完成此操作：

A) 从列表中省略用户自己的姓名，然后在其他地方打印用户的姓名。
或
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>

【问题讨论】：

标签： javascript angularjs node.js socket.io angularjs-ng-repeat

【解决方案1】：

为什么不把 ng-show 放在 li 标签本身：

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

这也许会消除空白问题。

【讨论】：

【解决方案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}} 变量打印出其余的姓名。

我现在唯一的问题是我的名字曾经是一个空白区域，所以现在打印了一个列表项，但不是用户名。

【讨论】：