javascript - angularjs ng-repeat 来自 json 嵌套的下拉菜单

标签 javascript angularjs json drop-down-menu

我有以下 example.json 文件:

[
  {
    "interests": [
      {
        "item": "art"
      },
      {
        "item": "literature"
      },
      {
        "item": "history"
      },
      {
        "item": "science"
      }
    ]
  },
  {
    "experience": [
      {
        "year": "novice"
      },
      {
        "year": "experienced"
      }
    ]
  }
]

在我的 View Controller 中,我读取了如下文件:

app.controller('ProfileCtrl', ["$scope", "$state", "$http",
    function ($scope, $state, $http) {

    $http.get('files/example.json').success(function (data)
        {
            $scope.myjsonobj= data;
        });

在我的 html View 中,我注入(inject)如下值:

<div ng-controller="ProfileCtrl">
...
    <select class="form-control" ng-model="user.favs">
       <option ng-repeat="p in interests.myjsonobj" value="{{p.item}}">{{p.item}}</option>
    </select>

问题:

如何在下拉菜单中仅显示“兴趣”值列表?如何访问 angularjs 中的嵌套 json 数组?
我当前的设置不起作用。

最佳答案

假设“interests”是您的 Controller 简称。

您可以使用:

<option ng-repeat="p in myjsonobj[0].interests" value="{{p.item}}">{{p.item}}</option>

理想情况下,您应该循环数据对象来查找带有“interests”键的索引与硬编码[0]。

更新:删除了“兴趣”。从重复。您似乎没有 ctrl 短名称绑定(bind)。

关于javascript - angularjs ng-repeat 来自 json 嵌套的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40095734/

相关文章:

javascript - 在脚本中使用 ZipFile java 类读取 zip 文件内容

javascript - 有没有工具可以删除 javascript 中未使用的方法?

javascript - 通过定义成员的同一模型中的数组调用方法

html - Angular 内容不允许背景扩展

javascript - 哪里写成功和错误

javascript - Bootstrap 的 AngularJS 分页不显示下一个/上一个按钮

php代码(获取json结果)

javascript - 从外部 JavaScript 访问 JSON 数据

javascript - redux-persist:persist 和 rehydrate 有什么区别?

arrays - 使用结构变量数组访问结构变量golang