如何更改标签

Question

我有这段代码：

<label ng-repeat="day in days">
    <input type="checkbox" ng-model="activityDays[$index]" /> {{day}}
    <br />
</label>

如何在选中时更改标签文字？

Answer 1

使用JavaScript，您可以遍历input的父级子女，并在其.data时更改其day。

var checkbox = document.querySelector('input[type=checkbox]');

checkbox.addEventListener('change', function() {
  if (this.checked == true) {
    for (i = 0; i < this.parentNode.childNodes.length; i++) {
      if (this.parentNode.childNodes[i].data !== undefined) {
        if (this.parentNode.childNodes[i].data.trim() == 'day') {
          this.parentNode.childNodes[i].data = 'night'
        }
      }
    }
  } else {
    for (i = 0; i < this.parentNode.childNodes.length; i++) {
      if (this.parentNode.childNodes[i].data !== undefined) {
        if (this.parentNode.childNodes[i].data.trim() == 'night') {
          this.parentNode.childNodes[i].data = 'day'
        }
      }
    }
  }
})

<label ng-repeat="day in days">
  <input type="checkbox" ng-model="activityDays[$index]" />day
  <br />
</label>