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

时间:2016-05-10 09:21:57

标签: angularjs json angularjs-ng-repeat getjson

我想在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

我希望你能帮助我,非常感谢!

1 个答案:

答案 0 :(得分: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"}]