admin管理员组

文章数量:1418139

If I want to remove/add element on DOM I just use ng-if and the code under it does not pile into to DOM, can I do the same using pure js? I don't want the HTML code inside my js code.

Hiding it using CSS:

<div id = "infoPage" style="display: none;">

Will still insert the element to the DOM.

EDIT

The condition for showing or not is based on a flag like:

var show = false; //or true

If I want to remove/add element on DOM I just use ng-if and the code under it does not pile into to DOM, can I do the same using pure js? I don't want the HTML code inside my js code.

Hiding it using CSS:

<div id = "infoPage" style="display: none;">

Will still insert the element to the DOM.

EDIT

The condition for showing or not is based on a flag like:

var show = false; //or true
  • javascript
  • angularjs
Share Improve this question edited Aug 2, 2017 at 7:46 Itsik Mauyhas asked Aug 2, 2017 at 7:31 Itsik MauyhasItsik Mauyhas 4,00415 gold badges74 silver badges119 bronze badges 13
  • 2 Possible duplicate of JavaScript DOM remove element – Weedoze Commented Aug 2, 2017 at 7:39
  • @Weedoze No. Its about adding/removing element based on a flag. – Rajesh Commented Aug 2, 2017 at 7:39
  • @Rajesh - yes, my goal is that only flag will appear in js. – Itsik Mauyhas Commented Aug 2, 2017 at 7:43
  • @Rajesh The link will explain him how to remove the child. If only have to add an if condition to remove it or not. What does it need more ? – Weedoze Commented Aug 2, 2017 at 7:46
  • You can do it with removeChild. Just add if condition, and that's it. Same thing like ngIf – Dino Commented Aug 2, 2017 at 7:47
 |  Show 8 more ments

1 Answer 1

Reset to default 5

You can try something like this:

Idea:

  • Create an object that holds reference of currentElement and its parent (so you know where to add).
  • Create a clone of current element as you want to add same element after its removed.
  • Create a property using Object.defineProperty. This way you can have your own setter and you can observe changes over it.
  • To toggle element, check
    • If value is true, you have to add element. But check if same element is already available or not to avoid duplication.
    • If false, remove element.

var CustomNGIf = function(element, callback, propertyName) {
  var _value = null;

  // Create copies of elements do that you can store/use it in future 
  this.parent = element.parentNode;
  this.element = element;
  this.clone = null;

  // Create a property that is supposed to be watched
  Object.defineProperty(this, propertyName, {
    get: function() {
      return _value;
    },
    set: function(value) {
      // If same value is passed, do nothing.
      if (_value === value) return;
      _value = !!value;
      this.handleChange(_value);
    }
  });

  this.handleChange = function(value) {
    this.clone = this.element.cloneNode(true);
    if (_value) {
      var index = Array.from(this.parent.children).indexOf(this.element);

      // Check if element is already existing or not.
      // This can happen if some code breaks before deleting node.
      if (index >= 0) return;
      this.element = this.clone.cloneNode(true);
      this.parent.appendChild(this.element);
    } else {
      this.element.remove();
    }

    // For any special handling
    callback && callback();
  }
}

var div = document.getElementById('infoPage');
const propName = 'value';
var obj = new CustomNGIf(div, function() {
  console.log("change")
}, propName);

var count = 0;
var interval = setInterval(function() {
  obj[propName] = count++ % 2;
  if (count >= 10) {
    window.clearInterval(interval);
  }
}, 2000)
<div class='content'>
  <div id="infoPage"> test </div>
</div>

本文标签： JavaScript equivalent to angularjs ngifStack Overflow

版权声明：本文标题：JavaScript equivalent to angularjs ng-if - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745274161a2651077.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。