Question

我的employee.json文件与我的控制器位于同一目录中。

这是我的json文件中的数据：

["John", "Clark"]

在控制器上我有：

.controller('EmployeeCtrl', function ($scope, $http) {
  $http.get('employee.json').then(function (res) {
    $scope.contents = res.data;
    });
 });

在模板上我有：

<div>
 <label class="control-label">Identify yourself:</label>
 <select ng-model="market.name">
   <option ng-repeat="content in contents" value="{{content}}">{{content}} </option>
 </select>
</div>

有谁知道为什么这不起作用？我的下拉列表没有显示任何内容。

Answer 1

我相信在承诺得到解决时，摘要周期已经运行，可能使用$scope.$apply解决了您的问题，因为它将再次运行摘要周期：

$http.get('employee.json').then(function (res) {
    $scope.$apply(function () {
        $scope.contents = res.data;
    });
});

根据评论，似乎问题依赖于您要检索的json的url，您是否尝试在url的开头添加斜杠以使其相对于您的域？

$http.get('/employee.json') //Note i've added "/" at the beginning.

Answer 2

.controller('EmployeeCtrl', function ($scope, $http) {
  $http.get('employee.json').success(function (res) {
    $scope.contents = response.data;
  });
});

还要确保JSON文件中的数据格式正确。

Answer 3

嗯，也许你想成为一般人，但你的json文件不是一个对象。您可能希望确保您的JSON采用{'label'：'info'}格式。然后，该响应仅将整个json作为对象返回为“res”。

所以如果你的json有{name：mike，job：ninja}，

$http.get(file).then(function(res){
    var data = res; //object
    var name = data.name; //property
}

我希望这会有所帮助。

Answer 4

如果您将文件移动到www文件夹，它应该没问题。和我一起工作。或者你的index.html是。

问候。

Answer 5

您需要在重复时使用（键，值）：

看看jsbin：

http://jsbin.com/segevojibe/edit?html,js,output

<select ng-model="market.name">
    <option ng-repeat="(key, content) in contents" value="{{content}}">{{content}}</option>
</select>

Answer 6

我以这种方式工作：在客户端，我创建了一个新的文件夹（服务），以便在app / script / service / jasonFactory.js上使用名为jasonFactory的服务。该服务的代码是：

casper.wait()

另外，我创建了一个新文件夹（数据），在app / data / Employee.json上有一个名为Employee.json的json文件。 json文件的内容是：

angular.module('clientApp')
  .factory('jsonFactory', function ($q, $http) {
    return {
      getOtherStuff: function () {
        var deferred = $q.defer(),
          httpPromise = $http.get('data/Employee.json');

        httpPromise.then(function (response) {
          deferred.resolve(response);
        }, function (error) {
          console.error(error);
        });

        return deferred.promise;
      }
    };
  });

然后，我在控制器文件app / script / controllers / usedController.js上添加了一些代码。控制器的代码是：

{"names": [
{"name": "John"}
]}

此外，模板如下：

.controller('AddCtrl', function (jsonFactory) {
 $scope.otherStuff = {};
    jsonFactory.getOtherStuff()
      .then(function (response) {
        $scope.otherStuff = response.data.names;
        alert($scope.otherStuff);
      }, function (error) {
        console.error(error);
        alert("test");
      });
});

从Controller读取JSON文件，并使用ng-repeat显示为<li>

6 个答案: