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 и фиксации изменений с тайм-аутом
этот ответ помог мне в написании функции обратного вызова