angularjs动态选择表单

时间:2016-11-18 12:20:57

标签: html angularjs json

我正在开发一个应用程序,我在服务器中检索包含以下内容的JSON数组:

[
    {"Day":"2016-11-18", "time":"09:00"},
    {"Day":"2016-11-18", "time":"15:20"},
    {"Day":"2016-11-19", "time":"10:30"},
    {"Day":"2016-11-19", "time":"12:00"},
    {"Day":"2016-11-21", "time":"15:40"},
    {"Day":"2016-11-21", "time":"17:50"}
]

而且我应该创建包含所有不同日期的不同数组,例如(2016-11-18,2016-11-19,2016-11-21)和另一个包含所有时间但在表单中的数组当我选择一天时,选择的时间应该只包含当天所属的时间。

我已经有部分代码可以工作,我已经从服务器中检索JSON数组的控制器,我还有一部分代码可以从JSON数组中提取日期和时间并设置selection属性。

CONTROLLER

.controller('AppCtrl', function($scope, $http) {
    $scope.data = {};

    $scope.submit = function(){
        var link = 'http://localhost/ShuttleFIX/api.php';
        $scope.var = "stringa di prova";
        $http.post(link, {username : $scope.data.username}).then(function (res){
            $scope.response = res.data;
        });
        $scope.vm = this;

    };
});

从JSON EXCTRACT

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

function DefaultController() {
  var vm = this;
  var events = [{
    "day": "11/17/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": "11/21/2016",
    "time": "16:10"
  }, {
    "day": "11/21/2016",
    "time": "17:25"
  }];

  vm.data = processItems(events);

  function processItems(events) {
    var result = {
      events: [],
      schedules: []
    };

    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;
  }
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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>

现在我的问题是,如何在我的控制器中插入从JSON中提取数据的函数?

由于

0 个答案:

没有答案