转换 ng-repeater 多级值

Question

我正在尝试解决两个问题（即使其中一个不是真正的问题）。

我必须遍历两级对象数组，它看起来很像这样：

{"id": "1","details": [{"name": "Name 1","surname": "Surname 1"}]},
{"id": "2","details": [{"name": "Name 2","surname": "Surname 2"}]},
{"id": "3","details": [{"name": "Name 3","surname": "Surname 3"}]},
{"id": "4","details": [{"name": "Name 4","surname": "Surname 4"}]}

我还需要转换打印值，使用ID作为参数：

$scope.convert = function (id){
  switch (id) {
    case "1":
       $scope.role = "role 1"
    break;
    case "2":
       $scope.role = "role 2"
    break;
    case "3":
       $scope.role = "role 3"
    break;
    case "4":
       $scope.role = "role 4"
    break;
  }
}

现在，在 html 中，这是我目前拥有的：

<h3>Works - with nested repeaters</h3>
<ul ng-repeat="i in items" ng-click="convert('{{i.id}}')">
   <ul ng-repeat="a in i.details">
      {{a.name}}
   </ul>
</ul>  
<br/>
{{role}}

下面是问题：

我知道在另一个 ng-repeat 中使用 ng-repeat 可以完成这项工作，但我认为这不是处理此类情况的最佳方法。我也试过ng-repeat-start/end，但我不知道怎么办，因为我总是收到一个错误，说即使它在那里也没有找到。
如果我点击名称来调用转换函数，它可以工作，但是如果我尝试像这样将函数调用到中继器中 {{ convert ('{{a.id}}') }} 它会失败。公平地说，我所需要的只是能够将转换后的字符串直接显示到中继器中，而不是 ID（不幸的是，我无法更改 json 文件）。

这是我上面描述的内容：http://codepen.io/anon/pen/YqXBqN?editors=1010

Answer 1

您需要更改转换方法，例如 -

 $scope.convert = function (id){
     switch (id) {
        case "1":
         return "role 1"
        break;
        case "2":
         return "role 2"
        break;
        case "3":
         return "role 3"
        break;
        case "4":
         return "role 4"
        break;
      }

    }

然后将您的 html 更新为-

<ul ng-repeat="i in items" ng-click="convert('{{i.id}}')">
      <ul ng-repeat="a in i.details">
        {{i.id}} - {{a.name}}- {{convert(i.id)}}

      </ul>
    </ul>

它的输出将-

1- Name 1 -role 1
2- Name 2 -role 2
3- Name 3 -role 3
4- Name 4 -role 4

Answer 2

语法错误 ng-click="convert('{{i.id}}')" 应转换为 ng-click="convert(i.id)"

而不是声明一个 role 变量值将属性添加到模型中，因为 id 很重要

$scope.addRole = function (model){
    var id = '' + model.id;
    switch (id) {
        case "1":
            model.role = 'role 1';
            break;
        case "2":
            model.role = 'role 2';
            break;
        case "3":
            model.role = 'role 3';
            break;
        case "4":
            model.role = 'role 4';
            break;
    }
}

html

<ul ng-repeat="i in items">
    {{addRole(i)}}
    {{i.id}} - {{i.role}}
</ul>

转换 ng-repeater 多级值

Convert ng-repeater multi-level values

angularjs

ng-repeat

angularjs-ng-repeat