Angular JS - пользовательская директива с элементами ul-li в качестве переключателей и флажков

Это небольшой фрагмент кода, который я написал и подумал, что он может помочь кому-то, кто ищет подобную функциональность:

пользовательские директивы для элементов li - щелкнув по ним, они выбирают / отменяют выбор элемента li и выдают выбранные объекты в массиве (можно собрать под контроллером)

    <div ng-app="myApp" ng-controller="myCtrl">

  <ul>
    <li>
      <input type="text" ng-model="search_ms.title" />
    </li>
    <li 
    ng-repeat="x in items | filter:search_ms" 
    multi-select multi-select-item="x" 
    ng-class="{selected:x.checked}" 
    ng-click="getAllSelectedItems(items)">
      {{x.title}} --> {{x.checked}}
    </li>
  </ul>

  <ul>
    <li>
      <input type="text" ng-model="search_ss.title" />
    </li>
    <li 
    ng-repeat="x in items_ | filter:search_ss" 
    single-select 
    single-select-item="x" 
    unselect-all-items="items_" 
    ng-class="{selected:x.checked}" 
    ng-click="getAllSelectedItems(items_)">
      {{x.title}} --> {{x.checked}}
    </li>
  </ul>

<div class="clearfloat">
</div>


  <br/>
  <br/>
  <br/>

  <p>
  {{selectedItems}}
  </p>

  <br/>
  <br/>
  <br/>

  <p>
  {{unselectedItems}}
  </p>

JS Fiddle: http://jsfiddle.net/AjayBunga/NBhn4/230/

Реализованы как одиночный выбор (например, радио), так и множественный выбор (например, флажки). Пожалуйста, предложите, могу ли я оптимизировать какой-либо код, или если это можно сделать гораздо проще, поскольку я новичок в угловых директивах.

Заранее спасибо.

1 ответ

Решение

Вместо использования ng-click и фиксации изменений с тайм-аутом

этот ответ помог мне в написании функции обратного вызова

AngularJS Директива Обратный звонок

Другие вопросы по тегам