angularjs ng-repeat 嵌套数组到一个唯一列表中

Question

我正在尝试将所有对象的嵌套数组中的所有值的列表放入一个列表中。
我的json文件结构如下：

{
    "booklist": {
        "fiction": [
          {
            "key": "book1",
            "value": "bookvalue1"
          },
          {
            "key": "book2",
            "value": "bookvalue2"
          }
        ],
        "romance": [
          {
            "key": "book3",
            "value": "bookvalue3"
          },
          {
            "key": "book4",
            "value": "bookvalue4"
          }
        ],
        "thriller": [
          {
            "key": "book5",
            "value": "bookvalue5"
          },
          {
            "key": "book6",
            "value": "bookvalue6"
          }
        ]         
}       

我正在尝试（我尝试过的）阅读下拉菜单中所有书籍的列表：

<ui-select name="books" ng-model="model.books" theme="selectize" required>
    <ui-select-match> {{$select.selected.value}} </ui-select-match>
    <ui-select-choices
            repeat="r.key as r in booklist | filter: $select.search">
        <div ng-bind-html="r.value | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

这样下拉菜单将如下所示：

bookvalue1
bookvalue2
bookvalue3
bookvalue4
bookvalue5
bookvalue6

在另一个输入元素中，我想获取上面所选书籍的类别：

<input type="text" name="category" ng-model="model.category" class="form-control" disabled="disabled" value="??"/>

如何获取上面所选书籍类别的值？

最终目标是将类别价值和账面价值分别传递到我的模型中。

重要提示：

我不允许更改 json 结构，它应该保持原样。我只需要更改和调整代码以正确读取信息。

Answer 1

你可以使用this code， 但我建议grouping books

Answer 2

您可以添加一些自定义过滤器，如下所示：

array1 = {
"booklist": {
    "fiction": [
      {
        "key": "book1",
        "value": "bookvalue1"
      },
      {
        "key": "book2",
        "value": "bookvalue2"
      }
    ],
    "romance": [
      {
        "key": "book3",
        "value": "bookvalue3"
      },
      {
        "key": "book4",
        "value": "bookvalue4"
      }
    ],
    "thriller": [
      {
        "key": "book5",
        "value": "bookvalue5"
      },
      {
        "key": "book6",
        "value": "bookvalue6"
      }
    ]         

}

.filter('filter', function(){
    return function(array1, searchTxt){
    angular.forEach(array1, function(v,k){
        if(v.value.indexOf(searchTxt) > -1){
          angular.forEach(v, function(v1, k1){
              return v1;
          })
      }
    })
  }
})

注意：我没有测试，请做需要的更改。

Answer 3

如果您想在单个下拉列表中显示，请组合数组。像这样

 {
        "booklist": {
              {
                "key": "book1",
                "value": "bookvalue1"
              },
              {
                "key": "book2",
                "value": "bookvalue2"
              },
              {
                "key": "book3",
                "value": "bookvalue3"
              },
              {
                "key": "book4",
                "value": "bookvalue4"
              },
              {
                "key": "book5",
                "value": "bookvalue5"
              },
              {
                "key": "book6",
                "value": "bookvalue6"
              }

}   

或使用

<ui-select-choices
            repeat="r.key as r in booklist.fiction | filter: $select.search">
        <div ng-bind-html="r.value | highlight: $select.search"></div>
    </ui-select-choices>