基于AngularJS中的id显示对象的值

我目前正在使用自定义筛选器在显示用户id时显示名称。因此，选定的用户可能是5，因此它会显示“bob”而不是“5”：

users对象包含整个users表

守则：

angular.module('myApp', []);
function xCtrl($scope) {
  $scope.users = [
   {"id":1, "name":"joe"},
   {"id":5, "name":"bob"},
   {"id":10, "name":"charlie"},
  ];
  $scope.select_user = function(user) {
   $scope.selected_user = user;
  }
}

angular.module('myApp').filter("display_name", function () {
    return function (user_id, users) {
    if(user_id) {
        return(users[users.map(function(x) { return x.id; }).indexOf(user_id)].name);
     }
    }
});

这样做很好，但每次显示名称时，我都会将整个users对象传递给过滤器，这让我觉得这样做效率很低。是否有更好的方法来使用过滤器，或者过滤器是错误的方法

---

演示：

一种方法是让

ng click

指令返回

$index

：

<div ng-repeat="user_data in users"
     ng-click="select($index)" class="selection">
{{ user_data.id }} - {{ user_data.name }} - {{$index}}
</div>

.selection{颜色：蓝色；光标：指针；}

用户：

{{user_data.id}-{{user_data.name}-{{$index}

所选用户ID:{{users[selection].ID}}

所选用户名：{{users[selection].Name}

我看不出在代码中使用该过滤器的逻辑，因此，如果我没有抓住要点，我深表歉意，但请尝试一下。在

ng click

事件之后，您已经将

selected\u user

对象绑定到

$scope

，并且该对象具有name属性。不需要过滤所有用户，只需查找名称，您只需使用

selected\u user.name

显示名称id存储在表中，而不是名称。当我在其他地方显示数据时，我希望使用一个通用过滤器将其转换为用户友好的名称。ng单击仅用于演示目的。

<div ng-repeat="user_data in users"
     ng-click="select($index)" class="selection">
{{ user_data.id }} - {{ user_data.name }} - {{$index}}
</div>

$scope.select = function(index) {
    $scope.selection = index;
};

Selected User ID: {{ users[selection].id }}<br>
Selected User Name: {{ users[selection].name }}