角度和绑定到一个键

Question

我的数据如下所示：

$scope.Statuses = [
 {"status_id":1, "status":"A"},
 {"status_id":2, "status":"B"},
 {"status_id":3, "status":"C"},
];

$scope.Items= [
 {"item_id":1, "item":"X", "status_id":3},
 {"item_id":2, "item":"Y", "status_id":2},
 {"item_id":3, "item":"Z", "status_id":1},
];

在我的 HTML 中，我循环遍历项目并在网格中显示它们。所以在某一时刻，我试图完成这样的事情：

<div>{{Statuses[Item.status_id]}}</div>

对于项目“X”，我希望看到状态为“C”等。看起来它应该更像是“Statuses[status_id = Item.status_id]}}”，但是对于我找不到这样的东西。这甚至可能吗？如果我也有的话，我可以用 Item 返回“状态”，但这似乎违背了这种情况下的目的，而且它可能会在以后搞砸其他事情。

事实上，在我写这篇文章时，我已经可以看到，即使我得到了键匹配 (status_id = Item.status_id)，我并没有告诉它需要显示哪个字段才能获得正确的结果。

Answer 1

类似这样的：

var app = angular.module('MyApp', []);

app.controller('AppCtrl', function($scope) {
    $scope.Statuses = [
      {"status_id":1, "status":"A"},
      {"status_id":2, "status":"B"},
      {"status_id":3, "status":"C"},
    ];

    $scope.Items = [
       {"item_id":1, "item":"X", "status_id":3},
       {"item_id":2, "item":"Y", "status_id":2},
       {"item_id":3, "item":"Z", "status_id":1},
    ];

    $scope.getStatus = function (val) {
        var foundStatus = $scope.Statuses.filter(x => x.status_id === val)[0];
        return foundStatus.status;
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
    <div ng-repeat="item in Items">
        <div ng-bind="item.status_id"></div>
        <div ng-bind="getStatus(item.status_id)"></div>
    </div>
</div>

注意：您当然可以使用 {{getStatus(item.status_id)}}，但我不喜欢这种方法，因为在这种情况下，如果您的客户端脚本需要一些时间，您的最终用户可能会看到 {{}}执行一些操作，例如 AJAX 调用。是的，有 ng-cloak 指令可以帮助解决这个问题，但我个人不喜欢它，而且它在这个问题中是题外话。