Question

我在HTML代码中有3个div元素和相同的类：

ValueError                                Traceback (most recent call last)
<ipython-input-6-dd823f9b8d22> in <module>()
----> 1 df.columns = pd.MultiIndex(levels = [['first', 'second'], ['a', 'b']], labels = [[0, 0, 1, 1], [0, 1, 0, 1]])

/usr/local/lib/python3.4/dist-packages/pandas/core/generic.py in __setattr__(self, name, value)
   2755         try:
   2756             object.__getattribute__(self, name)
-> 2757             return object.__setattr__(self, name, value)
   2758         except AttributeError:
   2759             pass

pandas/src/properties.pyx in pandas.lib.AxisProperty.__set__ (pandas/lib.c:44873)()

/usr/local/lib/python3.4/dist-packages/pandas/core/generic.py in _set_axis(self, axis, labels)
    446 
    447     def _set_axis(self, axis, labels):
--> 448         self._data.set_axis(axis, labels)
    449         self._clear_item_cache()
    450 

/usr/local/lib/python3.4/dist-packages/pandas/core/internals.py in set_axis(self, axis, new_labels)
   2800             raise ValueError('Length mismatch: Expected axis has %d elements, '
   2801                              'new values have %d elements' %
-> 2802                              (old_len, new_len))
   2803 
   2804         self.axes[axis] = new_labels

ValueError: Length mismatch: Expected axis has 0 elements, new values have 4 elements

在jQuery中，我只能在一个代码语句中隐藏所有div：<div class="hide"> </div> <div class="hide"> </div> <div class="hide"> </div>。我们如何在angular js中隐藏单个代码语句中的所有div？

Answer 1

你可以这样的东西（混合AngularJS / jQuery）：

var results = $document[0].getElementsByClassName("hide");
angular.forEach(results, function(result) {
    var wrappedResult = angular.element(result);
    wrappedResult.hide();
});

但是，将jQuery混合到AngularJS应用程序中通常是不受欢迎的，这看起来就像在生产应用程序中我不想要的非常脏的代码。

最佳方法以及“Angular”方式这样做只需将您的多个<div>换成外部<div>并使用ng-show / ng-hide。

<div ng-hide="someTrueVariable">
    <div class="hide"></div>

    <div class="hide"></div>

    <div class="hide"></div>
</div>

如果你是来自jQuery背景并且正在进入AngularJS，我会高度建议你看看下面的Stack Overflow线程。我真的认为这将有助于您进入AngularJS开发思维模式： "Thinking in AngularJS" if I have a jQuery background?

Answer 2

将元素类放在属性hide-element;

中

HTML：

<div hide-element="hide" class="hide">
    hide1
  </div>  
  <div hide-element="hide">
    hide2
  </div>
  <div hide-element="hide" class="hide">
    hide3
  </div>

JS：

使用hideElement属性获取类名并隐藏具有此类的元素

.directive('hideElement', function() {

    return {  
      restrict: 'A',
      scope: {
        hideElement: '@'
      },
      link: function(scope, ele, attr) {

        var className = scope.hideElement;
        ele.bind('click', function($event) {

          angular.element(document.querySelectorAll("." + className))
            .css('display', 'none');
        })
      }
    }
  })

工作demo plunker

像jQuery一样的AngularJS选择器

2 个答案: