DEMO

Question

我目前正在使用自定义过滤器在显示用户ID时显示名称。所以selected_user可能是5，所以它然后显示＆＃34; bob＆＃34;而不是＆＃34; 5＆＃34;：

{{ selected_user | display_name:users }}

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);
     }
    }
});

这样可以正常工作，但每次显示名称时，通过将整个用户对象传递给过滤器，感觉就像我这样做效率低。有没有更好的方法来使用过滤器或过滤器采用错误的方法？

演示：http://jsfiddle.net/h2rn3qnw/

Answer 1

一种方法是让ng-click指令返回$index：

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

DEMO

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

.selection { color:blue; cursor:pointer; }

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app='myApp'>
  <div ng-controller="xCtrl">
    Users:<br>
    <div ng-repeat="user_data in users"
         ng-click="select($index)" class="selection">
    {{ user_data.id }} - {{ user_data.name }} - {{$index}}
    </div> <!-- ng-repeat -->
    <hr>
    Selected User ID: {{ users[selection].id }}<br>
    Selected User Name: {{ users[selection].name }}
  </div> <!-- ng-controller -->
</div> <!-- ng-app -->

根据AngularJS中的id显示对象中的值

1 个答案:

DEMO