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>

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

重要提示：

3 个答案: