javascript - Angular 自定义多选列表

Question

我想构建一个列表，其功能类似于给定参数的选择或多选。例如。如果参数为false，则选择A->选择B，取消选择A并选择B。

 <ul>
      <li>a,</li>
      <li>b, and</li>
      <li>c</li>
</ul>

我最初的方法是这样的:

<ul myDirective>
      <li ng-model="a">a,</li>
      <li ng-model="b">b, and</li>
      <li ng-model="c">c</li>
</ul>

mydirective 监视 LI 的点击。单击它确定是否需要取消选择或取消设置任何内容。然后选择新值 an 并应用选定的类。

我认为我没有遵循 Angular 范式，我正在寻求一些帮助以找到正确的前进道路。

** 编辑 **我希望提供如下用户体验:http://jsfiddle.net/qbt2myj8/

Answer 1

在我看来，自定义指令将使您的代码更加干净，因为您已经在使用 AngularJS。

下面是一个使用 AngularJS 自定义指令的完整解决方案，它完全可重用于代码组织。

HTML

自定义指令默认行为

<ul data-my-directive class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

---

(这只是屏幕截图预览。请参阅下面的 PLAYGROUND 链接进行游戏)

---

HTML

具有自定义属性

<ul data-my-directive data-multi-select="true" class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

---

(这只是屏幕截图预览。请参阅下面的 PLAYGROUND 链接进行游戏)

---

Javascript

angular.module('app',[])
  .directive('myDirective', function(){
    return {
      transclude: true,
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs){
        function addClickListener(i, callback){
          selections[i].addEventListener('click', function(){
            callback(i);
          }, false);
        }

        // Set up attribute value. Goes to default if attribute is not set up
        attrs.multiSelect = attrs.multiSelect || 'false';

        scope.isSelected = [];

        var selections = element[0].getElementsByTagName('li');

        if(attrs.multiSelect === "true"){
          for(var i = 0; i < selections.length; i++){
            scope.isSelected[i] = false;
            addClickListener(i, function(i){
              if(scope.isSelected[i] === true){
                // if previously it is selected (red color), now make it unselected (black color / default color)
                angular.element(selections[i]).removeClass('selected');
                scope.isSelected[i] = false; 
              } else {
                // previously black color, so change it to red color
                angular.element(selections[i]).addClass('selected');
                scope.isSelected[i] = true;
              }
            });
          }
        } else {
          var currentSelection = -1;
          for(var i = 0; i < selections.length; i++){
            scope.isSelected[i] = false;
            addClickListener(i, function(i){
              if(scope.isSelected[i] === true){
                // do nothing
              } else {
                // previously black color, so change it to red color
                angular.element(selections[i]).addClass('selected');
                scope.isSelected[i] = true;

                angular.element(selections[currentSelection]).removeClass('selected');
                scope.isSelected[currentSelection] = false;
                currentSelection = i;
              }
            });
          }
        }
      }
    }
  });

最后，终极

PLAYGROUND

到处玩!

我希望它能解决您的要求。祝你有美好的一天:)