Angular JS - 带有ul-li元素的自定义指令作为单选按钮和复选框

时间:2017-05-22 13:45:40

标签: angularjs custom-directive

这是我编写的一小段代码,并认为它可能有助于寻找类似功能的人:

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小提琴:http://jsfiddle.net/AjayBunga/NBhn4/230/

已经实现了单选(如无线电)和多选(如复选框)。请建议我是否可以优化任何代码,或者是否可以通过更简单的方式完成,因为我不熟悉angular指令。

提前致谢。

1 个答案:

答案 0 :(得分:0)

而不是使用ng-click并使用超时捕获更改

这个答案帮助我编写了一个简单的回调函数

AngularJS Directive Callback