AngularJS - не знаю, как реализовать эту функцию с ng-repeat, логическим выпуском

Question

Я довольно новичок в AngularJS и застрял в реализации.

Я собираюсь и стараюсь быть максимально понятным, я не могу просто опубликовать jsFiddle в качестве проектадовольно большой, с большим количеством функций и вызовов API, но в любом случае мой вопрос касается логики, я знаю, что мне нужно делать, но я не знаю, как вы можете сделать это в AngularJS.

ПользовательМожно назначить задачу на определенный день, у него есть календарь, и каждый день имеет выпадающий список со всеми доступными задачами.Он может просто выбрать одну и все, все работает.

Но теперь я реализую нечто большее, пользователь может добавить до 2 задач, одну утром и одну днем.

Давайте посмотрим код:

<div ng-repeat="task in (d.assignment.tasks || [null]) track by $index">

это контейнер одного дня, в котором будет отображаться выпадающий список.Таким образом, в основном, если не добавлено ни одной задачи или добавлена ​​только одна, будет отображаться простой выпадающий список в div.

Но при нажатии на определенную кнопку (которая помещается в качестве первого элементавыпадающий список), это ng-click срабатывает:

<ul>
<li ng-click="addTask(p.person.id, d.date, 'afternoon', null)> SPLIT ME </li>

эта функция используется для добавления задач, и вы можете выбрать в качестве аргумента: 'morning', 'afternoon', 'both'

Делая это, я добавляю «пустую» задачу (где «ноль», мы передаем в качестве аргумента выбранную задачу) во второй половине дня.Таким образом, контейнер DIV выше, теперь перебирает 2 задачи, и это заставляет другое выпадающее меню появляться в том же DIV.

Все работает так, как задумано.Теперь, после первого <li> элемента раскрывающегося списка, который имеет ng-click, упомянутого выше, у нас есть ng-repeat, который перебирает все доступные задачи:

 <li ng-repeat="k in $scope.tasks" ng-click="addAssignment(p.person.id, d.date, 'both', k)">{{k.name}}</li>
</ul>

, поэтому здесь мы показываем всезадачи, и когда пользователь нажимает на одну из них, мы используем ту же функцию, что и выше, и добавляем задачу к «обоим».

Так что, если мы не рассматриваем вариант разделения, все работает, пользовательвыбирает одну задачу, и эта задача передается в функцию и добавляется на весь день.

Теперь проблема равна , пользователь решает разделить день, поэтому сначала он нажимает накнопка разделения, и появляется второе раскрывающееся меню.

Проблема, как вы можете видеть, состоит в том, что второе раскрывающееся меню будет иметь одинаковые <li> зацикленные элементы, что означает тот же ng-щелчок, и вы можетевидим, что ng-click имеет в качестве аргумента «оба», поэтому, когда он выбирает что-то из второго раскрывающегося списка, мы возвращаемся к квадрату 1, только один DIV показывал, потому что последнее задание было добавлено за весь день.

Что мне нужно, еслипользователь разделяет день, первый раскрывающийся список будет использоваться в качестве аргумента ng-click 'morning', а для второго раскрывающегося списка он будет использовать 'afternoon'.

Затем, если пользователь снова нажмет кнопку разделенияВ зависимости от , где он щелкнул (Первый выпадающий или второй?), задание, которое было выбрано в этом выпадающем списке, теперь будет главной задачей на весь день (поэтому аргумент - «оба»).

Моей первой идеей было создать функцию, которая будет использоваться в качестве аргумента для 'both', 'morning', 'afternoon', что-то вроде:

ng-click="addTask(p.person.id, d.date, <b>function()</b>, k)"

, но я застрял.

Основная проблема , я не знаю с ng-repeat, когда создается новый объект, так что теперь у нас есть 2 div, как я могу использовать определенный ng-clickс DIV и другой со вторым DIV.

Наконец, если все это неясно, я попытаюсь объяснить это словами:

ng-repeat зацикливается на 1 объекте, все хорошо, мы используем мой addTask() функция с «обоими».

ng-repeat теперь зацикливает на 2 объектах, мне нужно, чтобы addTask() принимал «утро» для первого объекта и «день» для второго объекта.

Надеюсь, я был достаточно ясен, извините за путаницу!

РЕДАКТИРОВАТЬ:

Я мог бы найти решение сам, я работаю над чем-то вроде этого:

    <li ng-if="split" ng-repeat="k in $scope.tasks" 
ng-click="$parent.$parent.$first && addTask(p.person.id, d.date, 'morning', k);
 $parent.$parent.$last && addTask(p.person.id, d.date, 'afternoon', k)">
{{k.name}}</li>

    <li ng-if="!split" ng-repeat="k in $scope.tasks" 
ng-click="$parent.$parent.$first && addTask(p.person.id, d.date, 'both', k)">
{{k.name}}test</li>

, поэтому в основном у меня есть 2 <li> элементов, и с помощью ng - если я показываю только один из них, в зависимости от того, была активирована кнопка разделения или нет.

Затем я обнаружил, что вы можете использовать $parent.$parent.$first для доступа к родительским ng-повторам, так что благодаря ng-click я могу вызвать 2 разные функции для 2 разных элементов родительского ng-repeat,

собираюсь провести еще несколько тестов, но на первый взгляд кажется, что это работает !!

любые предложения по лучшим решениям приветствуются

Answer 1

Я не думаю, что смогу напрямую ответить на ваш вопрос, но я попытался понять проблему, с которой вы столкнулись, поэтому я описал свой ответ ниже также в этом поршне для справки.Пожалуйста, проверьте и опубликуйте свой ответ.

Шаблоны:

<ul ng-repeat="sdl in schedules track by $index">
  <li ng-repeat="tm in tasks[sdl.value]" ng-click="addTask(tm)">{{tm}}</li>
  <button type="button" ng-if="sdl.value!='Both'" name="tm" ng-click="splitDay($index);">SPLIT ME</button>
</ul>

Контроллер:

  $scope.tasks = {
    Morning: ['Morning'],
    Afternoon: ['Afternoon'],
    Both: ['Morning', 'Afternoon']
  };
  $scope.schedules=[{
    name: 'One',
    value: 'Morning'
  },{
    name: 'Two',
    value: 'Afternoon'
  },{
    name: 'Three',
    value: 'Both'
  },{
    name: 'Four',
    value: 'Morning'
  },{
    name: 'Five',
    value: 'Both'
  }];
  $scope.addTask=function(tasks){
    console.log(tasks);
  };
  $scope.splitDay=function(index){
    $scope.schedules[index].value='Both';
  };