Angularjs:从密钥对中解析值

angularjs: resolve value from key pair

本文关键字：密钥对 Angularjs      更新时间：2023-09-26

是否有任何简单的方法来找到数组中的键并返回其值，而不是与angularjs键(也许通过使用表达式)?

现在，我这样做:

vm.topics = [{id:1,value:"a"} , {id:2,value:"b"} , {id:3,value:"c"}];
vm.tickets= [{topic:2,summary:"summary 1"} , {topic:1,summary:"summary 2"}];
vm.getTopicName = function (id) {
    for (int t=0 ; t<vm.topics.length ; t++)
        if (vm.topics[t].id == id)
            return vm.topics[t].value;
    return id;
};

和HTML部分:

<tr data-ng-repeat="item in vm.tickets">
  <td>{{vm.getTopicName(item.topic)}}</td>
  <td>{{item.summary}}</td>
</tr>

有没有像

<td>{{item.topic | id as value in vm.topics}}</td>

有趣的例子，但我认为它说明了问题。

——UPDATE——

正如@jantimon在评论中提到的，一种方法是将list更改为真实密钥对的对象，并简化一切:

vm.topics1 = {};
for (var i=0; i < vm.topics.length; i++) {
  var t = vm.topics[i];
  vm.topics1[t.id] = t.value;
}

和HTML只是更改为:

<td>{{vm.topics1(item.topic)}}</td>

实际上你使用两个不同的数组和从你的评论(ajax调用)我将创建新的数组在服务中，合并 topics和tickets，像:

[... ,
 {
  topic:2,
  summary:"summary 1",
  ticket_value: "b"
 },
... ]

所以控制器应该只绘制它(没有额外的逻辑)。这种方式将减少ng-repeat循环中的监视器，并且您不需要调用(rebuild) getTopicName()

我认为这是正确的方式

为了简化你的例子，如果你使用下划线库，你可以这样写:

 <td>{{topics[_.findIndex(topics, {id: item.topic})].value}}</td>

Demo in Fiddle

<div data-ng-repeat="item in tickets"> 
    <td>{{topics[_.findIndex(topics, {id: item.topic})].value}}    </td>
</div>

JS 

$scope._ = _;
$scope.topics = [{id:1,value:"a"} , {id:2,value:"b"} , {id:3,value:"c"}];
$scope.tickets = [{topic:2,summary:"summary 1"} , {topic:1,summary:"summary 2"}];

**作为旁注，尽量避免从HTML中调用方法，如:

<td>{{vm.getTopicName(item.topic)}}</td>
相关文章：