Question

输出应为

Name : AAA, Type: Flower
Name : BBB, Type: Bird

控制器

function myCtrl($scope) {
  $scope.items = [
    {id: 0, name: 'AAA', type: 12},
    {id: 1, name: 'BBB', type: 33}];

  $scope.types = [
    {id: 0, name: 'Dog'},
    {id: 12, name: 'Flower'},
    {id: 24, name: 'Fish'},
    {id: 33, name: 'Bird'}];
}

HTML

<div ng-app>
  <div ng-controller="myCtrl">
      <div ng-repeat="item in items">
          Name : {{ item.name }}, Type: {{ ??? }}
      </div>
  </div>
</div>

如何通过'item.type'检索$ scope.types中的匹配元素？

Answer 1

你的控制器应该是：

angular.module('myApp', []).controller('myCtrl', myCtrl);
function myCtrl($scope) {
  $scope.items = [
    {id: 0, name: 'AAA', type: 12},
    {id: 1, name: 'BBB', type: 33}];

  $scope.types = [
    {id: 0, name: 'Dog'},
    {id: 12, name: 'Flower'},
    {id: 24, name: 'Fish'},
    {id: 33, name: 'Bird'}];
  $scope.getType = function(id){
    return $scope.types.filter(function(item){
      return (item.id === id);
    })[0].name;
  }
}

模板：

<div ng-app='myApp'>
  <div ng-controller="myCtrl">
      <div ng-repeat="item in items">
          Name : {{ item.name }}, Type: {{ getType(item.type) }}
      </div>
  </div>
</div>

我在这里工作：http://jsfiddle.net/f9019o5k/2/

Answer 2

在控制器中写入并运行，它将返回所需的类型。用HTML做整件事可能会让它变得难以理解和复杂

$scope.getType(id){
    return $scope.items.filter(function(item){
        item.id === id;
    });
}

并在HTML中将其称为

<div ng-app>
  <div ng-controller="myCtrl">
      <div ng-repeat="item in items">
          Name : {{ item.name }}, Type: {{ getType(item.id) }}
      </div>
  </div>
</div>

Answer 3

如果我们使用角度过滤器来实现这一点，那就太简单了。

app.filter('myFilter ', function() {
  return function(input,obj) {
    angular.forEach(obj,function(val){
        if(val.id ==  input)
        {
           return val.name;
        }
     })
  };
});

<强> HTML

<div ng-app>
  <div ng-controller="myCtrl">
      <div ng-repeat="item in items">
     Name : {{ item.name }}, Type: {{ item.type | myFilter:types   }} 
    </div>
  </div>
</div>

通过HTML中的数组中的id检索元素（angular.js）

3 个答案: