Javascript 我的应用程序中出现奇怪的复选框问题_Javascript_Html_Angularjs

Javascript 我的应用程序中出现奇怪的复选框问题

javascript html angularjs

Javascript 我的应用程序中出现奇怪的复选框问题,javascript,html,angularjs,Javascript,Html,Angularjs,我使用Angular在复选框中遇到了一个奇怪的问题我有点像 <div class="checkbox"> <input type="checkbox" ng-model="checkAll"/> check all </div> <div class="checkbox" ng-repeat="item in items"> <input type="checkbox" ng-model="selectedItem[item.

我使用Angular在复选框中遇到了一个奇怪的问题

我有点像

<div class="checkbox">
   <input type="checkbox" ng-model="checkAll"/> check all
</div>
<div class="checkbox" ng-repeat="item in items">
    <input type="checkbox" ng-model="selectedItem[item.id]" ng-checked="checkAll"/>    
    {{item.title}}
</div>

<button type="button" ng-click="click()"></button>

在my console.log中，它输出

356:true

和

123:true

356和124都是ID，但我不确定为什么它们每个都有true。我希望得到一份工作
[356123]
作为我的结果。我该怎么做
谢谢
 下面的Plunker应该可以解决您的问题。基本上，您试图将一个整数传递给ng model
，希望它以某种方式绑定到具有该整数ID的项。但是，这是不允许的。AngularJS将传递给ng model
的值作为变量读取，由于JavaScript是，它会自动为其赋值，因为您没有显式地预先定义它
这就是为什么您得到的是365:true
和123:true
，而不是[365，123]

下面的代码修改了选中所有复选框的方式：它不使用ng checked
，而是使用ng clicked
并在$scope.items
数组中循环，以查找isChecked
值为$scope.checked
的项目。我意识到这在效率上是一个倒退，但折衷是它很容易允许每个复选框都有自己的truthy/falsy变量，用于ng model
来指示是否选中了它
如果您想在选中ng
的情况下保留原始的“checkAll”功能，您必须找到一种方法，为每个复选框的ng model
值动态创建变量，同时使其与选中的ng
协调工作。这是我想到的第一个方法，我知道它可以改进，但这应该让你开始
HTML:
<body ng-app="app">
    <div ng-controller="test">
        <div class="checkbox">
        <input type="checkbox" ng-model="checked" ng-click="checkAll(checked)" /> check all
        </div>
        <div class="checkbox" ng-repeat="item in items">
            <input type="checkbox" ng-model="item.isChecked" />    
            {{item.title}}
        </div>
        <button type="button" ng-click="click()">Click me</button>
    </div>
</body>

var app = angular.module('app', []);

app.controller('test', function($scope) {

    $scope.items = [{
        id: 365,
        title: 'item1',
        isChecked: true
    }, {
        id: 123,
        title: 'item2',
        isChecked: true
    }];

    $scope.checked = true;

    $scope.checkAll = function() {
        $scope.checked = !$scope.checked;
        for(var i = 0; i < $scope.items.length; i++) {
            $scope.items[i].isChecked = $scope.checked;
        }
    };

    $scope.click = function() {
        var selectedItems = [];
        for(var i = 0; i < $scope.items.length; i++) {
            if($scope.items[i].isChecked) {
                selectedItems.push($scope.items[i].id);
            }
        }
        console.log(selectedItems);
    };
});


全部检查
{{item.title}
点击我

JS:
<body ng-app="app">
    <div ng-controller="test">
        <div class="checkbox">
        <input type="checkbox" ng-model="checked" ng-click="checkAll(checked)" /> check all
        </div>
        <div class="checkbox" ng-repeat="item in items">
            <input type="checkbox" ng-model="item.isChecked" />    
            {{item.title}}
        </div>
        <button type="button" ng-click="click()">Click me</button>
    </div>
</body>

var app = angular.module('app', []);

app.controller('test', function($scope) {

    $scope.items = [{
        id: 365,
        title: 'item1',
        isChecked: true
    }, {
        id: 123,
        title: 'item2',
        isChecked: true
    }];

    $scope.checked = true;

    $scope.checkAll = function() {
        $scope.checked = !$scope.checked;
        for(var i = 0; i < $scope.items.length; i++) {
            $scope.items[i].isChecked = $scope.checked;
        }
    };

    $scope.click = function() {
        var selectedItems = [];
        for(var i = 0; i < $scope.items.length; i++) {
            if($scope.items[i].isChecked) {
                selectedItems.push($scope.items[i].id);
            }
        }
        console.log(selectedItems);
    };
});

var-app=angular.module（'app'，[]）；
应用程序控制器（'测试'，功能（$范围）{
$scope.items=[{
id:365，
标题：“项目1”，
我被检查过：是的
}, {
id:123，
标题：“项目2”，
我被检查过：是的
}];
$scope.checked=true；
$scope.checkAll=function（）{
$scope.checked=！$scope.checked；
对于（变量i=0；i<$scope.items.length；i++）{
$scope.items[i].isChecked=$scope.checked；
}
};
$scope.click=function（）{
var selectedItems=[]；
对于（变量i=0；i<$scope.items.length；i++）{
如果（$scope.items[i].isChecked）{
选择editems.push（$scope.items[i].id）；
}
}
console.log（selectedItems）；
};
});