Javascript 如果我选中所有复选框，则在AngularJS中应自动选中全选复选框，反之亦然_Javascript_Angularjs

Javascript 如果我选中所有复选框，则在AngularJS中应自动选中全选复选框，反之亦然

javascript angularjs

Javascript 如果我选中所有复选框，则在AngularJS中应自动选中全选复选框，反之亦然,javascript,angularjs,Javascript,Angularjs,如果我选中了顶部的复选框，那么所有复选框都将被选中。但当我单独选中每个复选框时，问题就出现了。全选复选框应该被自动选中，反之亦然。代码如下： <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <p>Click the table headers to cha

如果我选中了顶部的复选框，那么所有复选框都将被选中。但当我单独选中每个复选框时，问题就出现了。全选复选框应该被自动选中，反之亦然。代码如下：

    <html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <p>Click the table headers to change the sorting order:</p>

  <div ng-app="myApp" ng-controller="namesCtrl">
    <p>
      <button type="button" ng-click="remove($index)">Delete Selected</button>
    </p>

    <table border="1" width="100%">
      <tr>
        <th>
          <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
        </th>
        <th></th>
        <th>Sl no</th>
        <th ng-click="orderByMe('name')">Name</th>
        <th ng-click="orderByMe('country')">Country</th>
        <th>Delete</th>
      </tr>
      <tr ng-repeat="x in names | orderBy:myOrderBy">
        <td>
          <input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" />
        </td>
        <td>{{x.select}}</td>
        <td>{{$index+1}}</td>
        <td>{{x.name}}</td>
        <td>{{x.country}}</td>
        <td>
          <button type="button" ng-click="Delete(x)">Delete</button>
        </td>
      </tr>
    </table>

  </div>

  <script>
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
      $scope.names = [{
        name: 'Jani',
        country: 'Norway'
      }, {
        name: 'Carl',
        country: 'Sweden'
      }, {
        name: 'Margareth',
        country: 'England'
      }, {
        name: 'Hege',
        country: 'Norway'
      }, {
        name: 'Joe',
        country: 'Denmark'
      }, {
        name: 'Gustav',
        country: 'Sweden'
      }, {
        name: 'Birgit',
        country: 'Denmark'
      }, {
        name: 'Mary',
        country: 'England'
      }, {
        name: 'Kai',
        country: 'Norway'
      }];

      //for sorting the rows    
      $scope.orderByMe = function(x) {
          $scope.myOrderBy = x;
        }
        //single row deletion
      $scope.Delete = function(x) {
        $scope.names.splice($scope.names.indexOf(x), 1);
      };
      //selecting all checkboxes in the table
      $scope.checkAll = function() {
        angular.forEach($scope.names, function(x) {
          x.select = $scope.selectAll;
        });
      };
      //for selecting and deleting checked items
      $scope.remove = function() {
        $scope.names = filterFilter($scope.names, function(x) {
          return !x.select;
        });
      };

    }]);
  </script>

</body>

</html>


单击表格标题以更改排序顺序：

删除所选内容

Sl号
名称
国家
删除
{{x.select}}
{{$index+1}}
{{x.name}
{{x.country}
删除
angular.module（'myApp'，[]）.controller（'namesCtrl'，['$scope'，'filterFilter'，函数（$scope，filterFilter）{
$scope.names=[{
姓名：“Jani”，
国家：“挪威”
}, {
姓名：'卡尔'，
国家：'瑞典'
}, {
姓名：“Margareth”，
国家：'英格兰'
}, {
名称：'黑格'，
国家：“挪威”
}, {
名字：'乔'，
国家：'丹麦'
}, {
姓名：“古斯塔夫”，
国家：'瑞典'
}, {
名称：“Birgit”，
国家：'丹麦'
}, {
姓名：'玛丽'，
国家：'英格兰'
}, {
姓名:"凯",，
国家：“挪威”
}];
//用于对行进行排序
$scope.orderByMe=函数（x）{
$scope.myOrderBy=x；
}
//单行删除
$scope.Delete=函数（x）{
$scope.names.splice（$scope.names.indexOf（x），1）；
};
//选择表中的所有复选框
$scope.checkAll=function（）{
angular.forEach（$scope.names，函数（x）{
x、 select=$scope.selectAll；
});
};
//用于选择和删除选中的项目
$scope.remove=函数（）{
$scope.names=filterFilter（$scope.names，函数（x）{
return！x.select；
});
};
}]);

这是指向plunker的链接

有人能帮忙吗？

您可以在“全选”复选框中选中一个

ng

，例如：

 ng-checked="allChecked()"

其中，

allChecked

是控制器中的一个函数，用于确定是否已选择所有名称。大概

$scope.allChecked = function() {
  return $scope.names.filter(obj => obj.select).length === $scope.names.length
}

编辑：没有箭头功能

$scope.allChecked = function() {
  var selectedNames = $scope.names.filter(function(obj) {
    return obj.select
  });
  return selectedNames.length === $scope.names.length
}

您可以选中全选复选框上的

ng

，如：

 ng-checked="allChecked()"

其中，

allChecked

是控制器中的一个函数，用于确定是否已选择所有名称。大概

$scope.allChecked = function() {
  return $scope.names.filter(obj => obj.select).length === $scope.names.length
}

编辑：没有箭头功能

$scope.allChecked = function() {
  var selectedNames = $scope.names.filter(function(obj) {
    return obj.select
  });
  return selectedNames.length === $scope.names.length
}

下面给出的代码可能对您有所帮助。一旦您在最上面的复选框中选中或取消选中任何All复选框，那么您就完成了全部选中的代码。但对于ng上的单个复选框，单击可调用函数，但未实现此函数。这是您的更新代码

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <p>Click the table headers to change the sorting order:</p>

  <div ng-app="myApp" ng-controller="namesCtrl">
    <p>
      <button type="button" ng-click="remove($index)">Delete Selected</button>
    </p>

    <table border="1" width="100%">
      <tr>
        <th>
          <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
        </th>
        <th></th>
        <th>Sl no</th>
        <th ng-click="orderByMe('name')">Name</th>
        <th ng-click="orderByMe('country')">Country</th>
        <th>Delete</th>
      </tr>
      <tr ng-repeat="x in names | orderBy:myOrderBy">
        <td>
          <input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" />
        </td>
        <td>{{x.select}}</td>
        <td>{{$index+1}}</td>
        <td>{{x.name}}</td>
        <td>{{x.country}}</td>
        <td>
          <button type="button" ng-click="Delete(x)">Delete</button>
        </td>
      </tr>
    </table>

  </div>

  <script>
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
      $scope.names = [{
        name: 'Jani',
        country: 'Norway'
      }, {
        name: 'Carl',
        country: 'Sweden'
      }, {
        name: 'Margareth',
        country: 'England'
      }, {
        name: 'Hege',
        country: 'Norway'
      }, {
        name: 'Joe',
        country: 'Denmark'
      }, {
        name: 'Gustav',
        country: 'Sweden'
      }, {
        name: 'Birgit',
        country: 'Denmark'
      }, {
        name: 'Mary',
        country: 'England'
      }, {
        name: 'Kai',
        country: 'Norway'
      }];

      //for sorting the rows    
      $scope.orderByMe = function(x) {
          $scope.myOrderBy = x;
        }
        //single row deletion
      $scope.Delete = function(x) {
        $scope.names.splice($scope.names.indexOf(x), 1);
      };
      //selecting all checkboxes in the table
      $scope.checkAll = function() {
        angular.forEach($scope.names, function(x) {
          x.select = $scope.selectAll;
        });
      };

      $scope.xsetting = function(x) {
          $scope.selectAll = true;
          angular.forEach($scope.names, function(v, k) {
            if (!v.checked) {
              $scope.selectAll = false;
            }
          });
        }
        //for selecting and deleting checked items
      $scope.remove = function() {
        $scope.names = filterFilter($scope.names, function(x) {
          return !x.select;
        });
      };

    }]);
  </script>

</body>

</html>


单击表格标题以更改排序顺序：

删除所选内容

Sl号
名称
国家
删除
{{x.select}}
{{$index+1}}
{{x.name}
{{x.country}
删除
angular.module（'myApp'，[]）.controller（'namesCtrl'，['$scope'，'filterFilter'，函数（$scope，filterFilter）{
$scope.names=[{
姓名：“Jani”，
国家：“挪威”
}, {
姓名：'卡尔'，
国家：'瑞典'
}, {
姓名：“Margareth”，
国家：'英格兰'
}, {
名称：'黑格'，
国家：“挪威”
}, {
名字：'乔'，
国家：'丹麦'
}, {
姓名：“古斯塔夫”，
国家：'瑞典'
}, {
名称：“Birgit”，
国家：'丹麦'
}, {
姓名：'玛丽'，
国家：'英格兰'
}, {
姓名:"凯",，
国家：“挪威”
}];
//用于对行进行排序
$scope.orderByMe=函数（x）{
$scope.myOrderBy=x；
}
//单行删除
$scope.Delete=函数（x）{
$scope.names.splice（$scope.names.indexOf（x），1）；
};
//选择表中的所有复选框
$scope.checkAll=function（）{
angular.forEach（$scope.names，函数（x）{
x、 select=$scope.selectAll；
});
};
$scope.xsetting=函数（x）{
$scope.selectAll=true；
angular.forEach（$scope.names，function（v，k）{
如果（！v.选中）{
$scope.selectAll=false；
}
});
}
//用于选择和删除选中的项目
$scope.remove=函数（）{
$scope.names=filterFilter（$scope.names，函数（x）{
return！x.select；
});
};
}]);

这是，它正在工作。

下面给出的代码可能会对您有所帮助。一旦您在最上面的复选框中选中或取消选中任何All复选框，那么您就完成了全部选中的代码。但对于ng上的单个复选框，单击可调用函数，但未实现此函数。这是您的更新代码

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <p>Click the table headers to change the sorting order:</p>

  <div ng-app="myApp" ng-controller="namesCtrl">
    <p>
      <button type="button" ng-click="remove($index)">Delete Selected</button>
    </p>

    <table border="1" width="100%">
      <tr>
        <th>
          <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
        </th>
        <th></th>
        <th>Sl no</th>
        <th ng-click="orderByMe('name')">Name</th>
        <th ng-click="orderByMe('country')">Country</th>
        <th>Delete</th>
      </tr>
      <tr ng-repeat="x in names | orderBy:myOrderBy">
        <td>
          <input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" />
        </td>
        <td>{{x.select}}</td>
        <td>{{$index+1}}</td>
        <td>{{x.name}}</td>
        <td>{{x.country}}</td>
        <td>
          <button type="button" ng-click="Delete(x)">Delete</button>
        </td>
      </tr>
    </table>

  </div>

  <script>
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
      $scope.names = [{
        name: 'Jani',
        country: 'Norway'
      }, {
        name: 'Carl',
        country: 'Sweden'
      }, {
        name: 'Margareth',
        country: 'England'
      }, {
        name: 'Hege',
        country: 'Norway'
      }, {
        name: 'Joe',
        country: 'Denmark'
      }, {
        name: 'Gustav',
        country: 'Sweden'
      }, {
        name: 'Birgit',
        country: 'Denmark'
      }, {
        name: 'Mary',
        country: 'England'
      }, {
        name: 'Kai',
        country: 'Norway'
      }];

      //for sorting the rows    
      $scope.orderByMe = function(x) {
          $scope.myOrderBy = x;
        }
        //single row deletion
      $scope.Delete = function(x) {
        $scope.names.splice($scope.names.indexOf(x), 1);
      };
      //selecting all checkboxes in the table
      $scope.checkAll = function() {
        angular.forEach($scope.names, function(x) {
          x.select = $scope.selectAll;
        });
      };

      $scope.xsetting = function(x) {
          $scope.selectAll = true;
          angular.forEach($scope.names, function(v, k) {
            if (!v.checked) {
              $scope.selectAll = false;
            }
          });
        }
        //for selecting and deleting checked items
      $scope.remove = function() {
        $scope.names = filterFilter($scope.names, function(x) {
          return !x.select;
        });
      };

    }]);
  </script>

</body>

</html>


单击表格标题以更改排序顺序：

删除所选内容

Sl号
名称
国家
删除
{{x.select}}
{{$index+1}}
{{x.name}
{{x.country}
删除
angular.module（'myApp'，[]）.controller（'namesCtrl'，['$scope'，'filterFilter'，函数（$scope，filterFilter）{
$scope.names=[{
姓名：“Jani”，
国家：“挪威”
}, {
姓名：'卡尔'，
国家：'瑞典'
}, {
姓名：“Margareth”，
国家：'英格兰'