0

$scope.users = [{id: 1, name: "Test"}, {id: 2, name: "Dude"}]; のコントローラーがあります。

{{id | のようなことをしたい getName}} そして、私が持っているIDを取得し、$scope.usersをクロールして対応するIDを探し、IDの値に応じて「Test」または「Dude」を出力します。

これを達成するには、angularJSで何を使用すればよいですか?

<table class="table table-striped">
  <thead>
    <tr>
      <th>Winner</th>
      <th>Loser</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody ng-repeat="match in matchs">
    <tr>
      <!-- What I want is instead of winner_id / loser_id go and get from $scope.users the id and output user name instead -->
      <td>{{match.winner_id}} - {{match.winner_score}}</td>
      <td>{{match.loser_id}} - {{match.loser_score}}</td>
      <td>{{match.created_at}}</td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/wHVG6/

4

1 に答える 1

2

独自に作成せずに、組み込みのfilterを使用します。

{{(users | filter:{id: 1})[0].name}}

独自のフィルターは次のようになります。

app.filter('getName', ['filterFilter', function (filterFilter) {
  return function (input, id) {
    var r = filterFilter(input, {id: id})[0];
    return r && r.name;
  };
}]);

と：

{{users | getName:2}}

ただし、入力はidusersではなく であることに注意してください。フィルターにはスコープへの直接アクセスがないため、これが必要になるため、必要なすべてのデータを提供する必要があります。

または、単純な getter 関数でラップすることもできます。

$scope.getName = function getName(id) {
  return getNameFilter($scope.users, id);
};

と：

{{getName(3)}}

デモ: http://jsbin.com/exezik/4/

完全なコード:

(function (app, ng) {
  app.controller('TestCtrl', ['$scope', 'getNameFilter', function ($scope, getNameFilter) {
    $scope.users = [{id: 1, name: "Test"}, {id: 2, name: "Dude"}, {id: 3, name: "Foobar"}];

    $scope.getName = function getName(id) {
      return getNameFilter($scope.users, id);
    };
  }]);

  app.filter('getName', ['filterFilter', function (filterFilter) {
    return function (input, id) {
      var r = filterFilter(input, { id: id})[0];
      return r && r.name;
    };
  }]);
}(angular.module('Test', []), angular));
于 2013-06-26T14:42:29.307 に答える