javascript - 无法刷新 Angularjs 中的 ng-repeat

标签 javascript angularjs html

我正在尝试使用一个函数来检查复选框树中的所有复选框。 它正在成功选中和取消选中,但是如果我选择一个复选框然后按下全部选中,然后取消选中,单个复选框将保持卡住状态

HTML

<fieldset id="field3">
  <table>
    <tr ng-repeat="e in empdepts | groupBy:'dep_LDesc'">
      <td>
        <label ng-click="showContent = !showContent"></label>
        <details ng-open="showContent">
          <summary>
            <input type="checkbox" ng-model="chk" /> {{e[0].dep_LDesc}}</summary>
          <div ng-repeat="employee in e">
            <input type="checkbox" ng-checked="chk"> {{employee.Sname}}
          </div>
        </details>
      </td>
    </tr>
  </table>
  <hr />
  <table>
    <tr>
      <td>
        <input type="checkbox" ng-model="all" ng-click="selectall(all)" /> All Departments</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" ng-model="self" /> Self Services </td>
    </tr>
  </table>
</fieldset>

Controller

$scope.selectall = function (all) {
    if (all) {
        $scope.chk = true;
    }
    else
    {
        $scope.chk = false;
    }
}

LoadEmpDepts();

function LoadEmpDepts() {
    Assignments.getempdepts().then(function (response) {
        $scope.empdepts = (response.data);
        console.log($scope.empdepts);
    })
}

enter image description here

最佳答案

您需要为单个元素设置 checked 属性,因此可以选择在数组的每个元素内设置一个 checked 属性。

所以每当复选框被选中时更新属性。并在检查所有元素时使所有元素的检查属性为真。

  <label for="{{all.type}}"  ng-if="x.type === 'ALL'" >{{x.type}}</label>

例子,

DEMO

关于javascript - 无法刷新 Angularjs 中的 ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47187782/

相关文章:

javascript - fullpage.js : the height cuts the text

javascript - 使用 Service Worker 检查用户是否重新在线

javascript - vuex中状态数组推送不是函数错误

javascript - 带有链接到 ng-init 的对象数组的 ng-options

html - 填充和空格 : nowrap in Chrome and IE 的奇怪问题

php - 如何通过从另一个下拉列表中选择值来填充下拉列表

javascript - 为什么我们不能将函数绑定(bind)到 :disabled input fields?

javascript - 表单提交作为 HTML 中的弹出窗口

javascript - 正则表达式过滤掉 Angular 中的 YouTube 视频

javascript - 如何在 session 中或本地以 Angular 存储数据..?