angularjs 使用 ng-options 为模型添加索引

Question

我有一个包含两个选择的表单，其中填充了我从服务器（此时为本地主机）收到的 JSON 数组，在第一个选择中我有 3 天，在第二个选择中我有很多次在第一个选择中选择的日期，而不是我应该在服务器上发布两个选择的选择，但此时我发布了两个对象，一个用于当天，一个用于时间，所以我只想添加 ng-model 一个在服务器上索引一个帖子，以便以一种简单的方式管理这些数据。

这是我的代码，

SCRIPT.JS：

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

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

function DefaultController(dataService, $http) {
  var vm = this;

  getEvents();

  function getEvents() {
    return dataService.getEvents()
      .then(function (data) {
        vm.data = data;
        return vm.data;
      });
  }
    vm.submit = function (){
        console.log("funzione");
        console.log(vm.form);
        var data = vm.form; // IMPORTANT
        //console.clear();
        var link = 'http://localhost/api/apiDoFix.php';
        var mail = window.localStorage.getItem("mail");
        $http.post(link, {ora: data.ora, mail: mail})
            .then(function (res){
                console.log("Dentro http.post");
                var response = res.data;
                console.log("risposta" + response);
            });
    };
}

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

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

  return service;

  function getEvents() {
    var config = {
      transformResponse: function (data, headers) {
        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;
      }
    };

    return $http.get('http://localhos/api/apiTimes.php', config)
      .then(getEventsCompleted)
      .catch(getEventsFailed);

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

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

FORM.HTML：

<div class="list">
                        <label class="item item-input item-select">
                            <div class="input-label">
                                Giorno:
                            </div>
                            <select ng-options="event as event.date for event in ctrl.data.events" ng-model="ctrl.form.giorno">
                                <option disabled>Seleziona un giorno </option>
                            </select>
                        </label>
                    </div>
                    <div class="list">
                        <label class="item item-input item-select">
                            <div class="input-label">
                                Ora:
                            </div>
                            <select ng-options="schedule as schedule.time for schedule in ctrl.data.schedules | filter: { date: ctrl.form.giorno.date}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno">
                                <option disabled>Seleziona un orario </option>
                            </select>

我该如何解决这个问题？

谢谢

Answer 1

方法一：

您可以使用ng-options="index as value for (index, value) in values

例如：

<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
            Giorno:
        </div>
        <select ng-options="idx as event.date for (idx, event) in ctrl.data.events" ng-model="ctrl.form.giorno">
            <option disabled>Seleziona un giorno </option>
        </select>
    </label>
</div>
<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
        Ora:
        </div>
        <select ng-options="idx as schedule.time for (idx, schedule) in ctrl.data.schedules | filter: { date: ctrl.form.giorno.date}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno">
            <option disabled>Seleziona un orario </option>
        </select>
    </label>
</div>       

Here is a fiddle for it

方法二：

在ng-options 中你可以使用indexOf

<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
            Giorno:
        </div>
        <select ng-options="ctrl.data.events.indexOf(event) as event.date for event in ctrl.data.events" ng-model="ctrl.form.giorno">
            <option disabled>Seleziona un giorno </option>
        </select>
    </label>
</div>
<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
        Ora:
        </div>
        <select ng-options="ctrl.data.schedules.indexOf(schedule) as schedule.time for schedule in ctrl.data.schedules | filter: { date: ctrl.form.giorno.date}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno">
            <option disabled>Seleziona un orario </option>
        </select>
    </label>
</div>