使用 AngularJS 从 JSON 响应中填充选择列表答案

【问题标题】：Populate a select list with AngularJS from a response in JSON使用 AngularJS 从 JSON 响应中填充选择列表
【发布时间】：2023-03-15 05:48:01
【问题描述】：

我想以 JSON 格式在服务器上下载响应，其中包含用于填充我的选择列表的属性。我想用 AngularJS 来做，我正在使用 Angular 2。什么都没有出现，我认为问题出在我的属性 ng-repeat 上：

<div id="myDiv">

  <div ng-app="d3DemoApp">
    <div ng-controller="AppCtrl">
      <div ng-repeat="n in filters track by $index">
        {{n}}
       </div>
     </div>
  </div>

</div>

这是我的控制器：

angular.module('d3DemoApp',[])
    .controller('myCtrl',function($scope) {
        $scope.notes = userService.getData();
        //Create and append select list
        var selectList = document.createElement("select");
        selectList.setAttribute("id", "releaseFilter");
        myDiv.appendChild(selectList);
        selectList.setAttribute("class", "form-control");
        selectList.setAttribute("onclick", "myFunction()");

        //Create and append the options
        for (var i = 0; i < $scope.notes.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value", array[i]);
            option.text = $scope.notes[i];
            selectList.appendChild(option);
        }
});

这是应该下载响应的服务：

app.service("userService",["$http",
    function($http) {
        _this = this;
        this.getData = function() {
        },
            $http.get('./dataOnServer.json'). // This adress is normally an HTTP adress which send me the JSON
            success(function(data) {
                return data;
            });
    }
]);

这是 Plunker 问题的在线示例：https://plnkr.co/edit/du7sU8bhg2G3X7HckbV9?p=preview

希望你能帮帮我，非常感谢！

【问题讨论】：

你的 Plunker 不工作。
是的，这是问题的在线示例。

标签： angularjs json angularjs-ng-repeat getjson

【解决方案1】：

我会指出，当您没有在您的范围或任何地方定义此类变量时，您是在重复 filters？你可能应该重复$scope.notes，所以它会是这样的：

<div id="myDiv">
  <div ng-app="d3DemoApp">
    <div ng-controller="AppCtrl">
      <div ng-repeat="n in notes track by $index">
        {{n}}
      </div>
    </div>
  </div>
</div>

编辑：

你可以这样选择：

<select>
  <option ng-repeat="n in notes">{{n.value}}</option>
</select>

而且您的 JSON 无效。重复应该是这样的：

[{value: "value 1"},{value: "value 2"},{value: "value 3"}]

【讨论】：

已创建选择但未下载数据。您可以检查 Plunker。非常感谢您的帮助！
对不起，我没有看看你的 json 有什么样的值。但是我编辑了我的答案，以便您应该在您的情况下使用 {{n.value}} 并设置有效的 JSON。一开始我只是发布了一个更通用的答案。
我也有同样的问题。但我有一个问题，可以使用 <option ng-repeat="n in notes">{{n.something}}</option> 吗？因为我的 JSON 没有密钥！编辑：我刚刚看到你的编辑......所以我的回应只是一个数组。如何修改代码以使其正常工作？
您应该可以只使用<option ng-repeat="n in notes">{{n}}</option>。在您的情况下，我无法真正对此进行测试，因为您的 Plunker 不起作用。它缺少依赖项。