Question

当我提交表单时，提交的字段之一是ID（编号）而不是名称，以便服务器更容易处理。像这样：

HTML下拉列表选择

<select ng-model="myColor" class="form-control"
    ng-options = "color.ID as color.color for color in $parent.colorSelection">
</select>

AngularJS

$scope.colorSelection = [{"color": "Red", "ID": "7011"}, {"color": "Blue", "ID": "7012"}];

所以服务器发回JSON

res.json({
    Color: req.query.color, 
});

现在当我得到结果时，我想显示名称而不是ID号，这是服务器发回给我的。因此，我想要显示“红色”，而不是显示“7011”。我该怎么做呢？执行以下操作无效。

{{results.Color.color}}

Answer 1

由于colorSelection是一个数组，你必须直接或通过使用其中一个数组函数来遍历它。

在这种情况下，find可能就是您想要的（如果Angular尚未为您提供垫片，您可能需要在旧浏览器上使用垫片）：

var entry = $scope.colorSelection.find(function(entry) { return entry.ID == results.Color.color; });
var color = entry && entry.color;

color将为null（未找到）或颜色名称。

与ES2015相比，它不那么笨重了：

let entry = $scope.colorSelection.find(entry => entry.ID == results.Color.color);
let color = entry && entry.color;

另一种方法是将可重复使用的颜色ID映射到名称：

在ES5中，你可能会使用一个对象：

// One-time initialization of the map, just after you create
// $scope.colorSelection
$scope.colorSelectionMap = Object.create(null);
$scope.colorSelection.forEach(function(entry) {
    $scope.colorSelectionMap[entry.ID] = entry.color;
});

然后

var color = $scope.colorSelectionMap[results.Color.color];

在ES2015中，您仍然可以这样做，或者您可以使用Map：

// One-time initialization of the map, just after you create
// $scope.colorSelection
$scope.colorSelectionMap = new Map(
    $scope.colorSelection.map(entry => [entry.ID, entry.color])
);

然后

var color = $scope.colorSelectionMap.get(results.Color.color);

Answer 2

您需要使用以下代码进行选择

<select ng-model="myColor" class="form-control"
ng-options = "colorSelection as colorSelection.color for colorSelection in colorSelection ">

如何检索具有值的键

2 个答案: