带有json数组的angularjs动态选择_Angularjs_Arrays_Json_Httprequest

带有json数组的angularjs动态选择

angularjs arrays json

带有json数组的angularjs动态选择,angularjs,arrays,json,httprequest,Angularjs,Arrays,Json,Httprequest,我正在开发一个应用程序，我应该通过http.get方法从服务器检索JSON数组阵列的结构如下所示： [{ "day": "17/11/2016", "time": "09:45" }, { "day": "17/11/2016", "time": "16:50" }, { "day": "18/11/2016", "time": "11:25" }, { "day": "18/11/2016", "time": "12

我正在开发一个应用程序，我应该通过http.get方法从服务器检索JSON数组

阵列的结构如下所示：

[{
    "day": "17/11/2016",
    "time": "09:45"
  }, {
    "day": "17/11/2016",
    "time": "16:50"
  }, {
    "day": "18/11/2016",
    "time": "11:25"
  }, {
    "day": "18/11/2016",
    "time": "12:30"
  }, {
    "day": "21/11/2016",
    "time": "16:10"
  }, {
    "day": "21/11/2016",
    "time": "17:25"
  }]

从这个数组中，我应该创建一个包含两个选项的表单，第一个是天（例如17/11/2016、18/11/2016、21/11/2016），第二个是天（例如09:45、16:50或11:25、12:30或16:10、17:25）的时间“归属”

我想我已经找到了这个问题的解决方案，但是当我试图运行项目时，选择总是空的，但是控制台告诉我没有错误

这是我的密码

HTML：

<html>
  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-app="demo">
      <div ng-controller="DefaultController as ctrl">
        <div class="form-group">
          <label>Event Date</label>
          <select ng-options="event as event.date for event in ctrl.data.events" ng-model="ctrl.event">
            <option value="">Select</option>
          </select>
        </div>
        <div class="form-group">
          <label>Event Time</label>
          <select ng-options="schedule as schedule.time for schedule in ctrl.data.schedules | filter: { date: ctrl.event.date}" ng-model="ctrl.schedule" ng-disabled="!ctrl.event">
            <option value="">Select</option>
          </select>
        </div>
      </div>
    </div>
  </body>
</html>

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .factory('dataService', dataService);

DefaultController.$inject = ['dataService'];

function DefaultController(dataService) {
  var vm = this;

  getEvents();

  function getEvents() {
    return dataService.getEvents()
      .then(function (data) {
        vm.data = data;
        return vm.data;
      });
  }
}

dataService.$inject = ['$http'];

function dataService($http) {
  var service = {
    getEvents: getEvents
  };

  return service;

  function getEvents() {
    var config = {
      transformResponse: function (data, headers) {
        if(headers("content-type") === "application/json; charset=utf-8" && angular.isString(data)) {
          var result = {
            events: [],
            schedules: []
          };

          var events = JSON.parse(data);
          var dates = [];
          for (var i = 0; i < events.length; i++) {
            if (dates.indexOf(events[i].day) === -1) {
              var date = events[i].day;
              dates.push(date);
              result.events.push({
                date: date
              });
            }

            result.schedules.push({
              date: events[i].day,
              time: events[i].time
            });
          }

          return result;
        } else {
          return data;
        }
      }
    };

    return $http.get('events.json', config)
      .then(getEventsCompleted)
      .catch(getEventsFailed);

    function getEventsCompleted(response) {
      return response.data;
    }

    function getEventsFailed(error) {
      console.error(error);
    }
  }
}


活动日期
挑选
活动时间
挑选

JS：

<html>
  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-app="demo">
      <div ng-controller="DefaultController as ctrl">
        <div class="form-group">
          <label>Event Date</label>
          <select ng-options="event as event.date for event in ctrl.data.events" ng-model="ctrl.event">
            <option value="">Select</option>
          </select>
        </div>
        <div class="form-group">
          <label>Event Time</label>
          <select ng-options="schedule as schedule.time for schedule in ctrl.data.schedules | filter: { date: ctrl.event.date}" ng-model="ctrl.schedule" ng-disabled="!ctrl.event">
            <option value="">Select</option>
          </select>
        </div>
      </div>
    </div>
  </body>
</html>

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .factory('dataService', dataService);

DefaultController.$inject = ['dataService'];

function DefaultController(dataService) {
  var vm = this;

  getEvents();

  function getEvents() {
    return dataService.getEvents()
      .then(function (data) {
        vm.data = data;
        return vm.data;
      });
  }
}

dataService.$inject = ['$http'];

function dataService($http) {
  var service = {
    getEvents: getEvents
  };

  return service;

  function getEvents() {
    var config = {
      transformResponse: function (data, headers) {
        if(headers("content-type") === "application/json; charset=utf-8" && angular.isString(data)) {
          var result = {
            events: [],
            schedules: []
          };

          var events = JSON.parse(data);
          var dates = [];
          for (var i = 0; i < events.length; i++) {
            if (dates.indexOf(events[i].day) === -1) {
              var date = events[i].day;
              dates.push(date);
              result.events.push({
                date: date
              });
            }

            result.schedules.push({
              date: events[i].day,
              time: events[i].time
            });
          }

          return result;
        } else {
          return data;
        }
      }
    };

    return $http.get('events.json', config)
      .then(getEventsCompleted)
      .catch(getEventsFailed);

    function getEventsCompleted(response) {
      return response.data;
    }

    function getEventsFailed(error) {
      console.error(error);
    }
  }
}

angular
.module（'演示'，[]））
.controller（'DefaultController'，DefaultController）
.工厂（“数据服务”，数据服务）；
DefaultController.$inject=['dataService']；
函数DefaultController（数据服务）{
var vm=这个；
getEvents（）；
函数getEvents（）{
return dataService.getEvents（）
.then（功能（数据）{
vm.data=数据；
返回vm.data；
});
}
}
数据服务.$inject=['$http']；
函数数据服务（$http）{
var服务={
getEvents:getEvents
};
回程服务；
函数getEvents（）{
变量配置={
transformResponse：函数（数据、标题）{
if（标题（“内容类型”）==“应用程序/json；字符集=utf-8”&&angular.isString（数据））{
var结果={
事件：[]，
附表：[]
};
var events=JSON.parse（数据）；
var日期=[]；
对于（var i=0；i


有人能帮我吗
Than'ks
我认为您在跨源请求中遇到的问题只支持协议方案
。为此，您需要检查获取json数据的url检查此项，它对我有效，对我无效…..在控制台中，我看到阵列，然后告诉我此错误：无法加载资源：net:：ERR\u EMPTY\u response请清除浏览器。