Angularjs ng重复嵌套数组陷入一个唯一列表中

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

您可以使用此代码，但是我建议将书籍分组

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>