如何使用angularJS基于外键从JSON中获取不同的值

Question

我有两个 JSON 数组，$scope.data 有主要细节，我想在 UI 中显示，因为 cInstId 是来自 JSON $scope.color 的 foreign key。

两个 JSON 数组是

$scope.data = [
    {
        "id": 1,
        "cTitle": "One",
        "cInstId": 1
    },
    {
        "id": 2,
        "cTitle": "Two",
        "cInstId": 2
    },
    {
        "id": 3,
        "cTitle": "Three",
        "cInstId": 3
    },
    {
        "id": 4,
        "cTitle": "Four",
        "cInstId": 4
    },
    {
        "id": 5,
        "cTitle": "Five",
        "cInstId": 4
    }
];

$scope.color = [
    {
        "cInstId": 1,
        "cInstTitle": "Blue"
    },
    {
        "cInstId": 2,
        "cInstTitle": "Green"
    },
    {
        "cInstId": 3,
        "cInstTitle": "Red"
    },
    {
        "cInstId": 4,
        "cInstTitle": "Orange"
    },
    {
        "cInstId": 5,
        "cInstTitle": "Violet"
    }
];

我的预期输出应该和图片一样

<div ng-repeat="members in data">
    <!-- How to Show it in the UI -->
</div>

注意：不要在 控制器。

Answer 1

您可以在此处使用自定义过滤器。

angular.module('ModuleName').filter('color', function($filter) {
  return function(id, colorArray) {
    return $filter('filter')(colorArray,{'cInstId': id})[0].cInstTitle;
  };
});

按如下方式使用此过滤器：

<div ng-repeat="members in data">
    <!-- How to Show it in the UI -->
    <span>{{member.cInstId | color:color}}</span><!--Second color is your scope var -->
</div>

注意：我用过this和this

但如果您可以创建颜色服务并使用该服务并直接使用数组，那就更好了。