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

我有两个JSON数组，$scope.data有主要的细节，我想在UI中显示，

cInstId

是JSON$scope.color中的

外键

这两个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"
    }
];

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




注意：不要为中的每个实现创建任何临时数组
控制器

您可以在此使用自定义筛选器进行此操作

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>


{{member.cInstId | color:color}

注意：我已经使用和

但是，如果您可以创建您的颜色服务并直接使用该阵列提供的服务，则效果会更好。
您尝试过什么吗？给我们看看代码。@ParthaSarathiGhosh请帮助我…看看我的自定义过滤器这里它正在校准角度过滤器并传递你的颜色数组。它还传递您提供的id以在此处找到确切的颜色。可以使用$scope.color而不是在ColorService中手动输入JSON？？？是的，然后您需要将数组作为过滤器输入传递。如下所示{{member.cInstId | color:collorArray}}~。
<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>