Question

我的复选框很少：

<md-checkbox ng-model="b.user[0]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[0]) > -1" ng-click="selection(user[0])" class="md-primary md-hue-2" ng-true-value="'Checkbox 1'" ng-false-value="null">Checkbox 1</md-checkbox>

<md-checkbox ng-model="b.user[1]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[1]) > -1" ng-click="selection(user[1])" class="md-primary md-hue-2" ng-true-value="'Checkbox 2'" ng-false-value="null">Checkbox 2</md-checkbox>

<md-checkbox ng-model="b.user[2]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[2]) > -1" ng-click="selection(user[2])" class="md-primary md-hue-2" ng-true-value="'Checkbox 3'" ng-false-value="null">Checkbox 3</md-checkbox>

<md-checkbox ng-model="b.user[3]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[3]) > -1" ng-click="selection(user[3])" class="md-primary md-hue-2" ng-true-value="'Checkbox 4'" ng-false-value="null">Checkbox 4</md-checkbox>

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

我在数组中添加这些复选框的值。我的指令代码是：

scope.user = ['Checkbox 1','Checkbox 2','Checkbox 3','Checkbox 4'];
scope.selected = [];
scope.toggleSelection = function (value) {
    var idx = scope.selected.indexOf(value);
    if (idx > -1) {
        scope.selected.splice(idx, 1);
    }
    else {
        scope.selected.push(value);
    }
};    
scope.submit = function() {
    scope.b.user = scope.selected;
};

但是我在数组中得到重复的值。示例：当我单击Checkbox 1和Checkbox 2并提交包含的数组时：['Checkbox 1'，'Checkbox 2']。但之后，检查标记突然消失，当我再次尝试点击它们时，只有涟漪效应，但没有检查标记。当我重新单击相同的复选框时，该数组也可以具有重复值。任何人都可以帮我解决这个问题吗？

Answer 1

@shreyagupta，请找到你的修改后的代码。导致问题的逻辑错误很少。控制器代码：

$scope.user = ['Checkbox 1','Checkbox 2','Checkbox 3','Checkbox 4'];
$scope.selected = ['Checkbox 1'];
$scope.toggleSelection = function (value) {
    var idx = $scope.selected.indexOf(value);
    if (idx > -1) {
        $scope.selected.splice(idx, 1);
    }
    else {
        $scope.selected.push(value);
    }
};    
$scope.submit = function() {
    $scope.b.user = $scope.selected;
    console.log($scope.b.user);
};

和HTML代码：

<md-checkbox ng-model="b.user[0]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[0]) > -1" ng-click="toggleSelection(user[0])" class="md-primary md-hue-2" ng-true-value="'Checkbox 1'" ng-false-value="null">Checkbox 1</md-checkbox>

<md-checkbox ng-model="b.user[1]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[1]) > -1" ng-click="toggleSelection(user[1])" class="md-primary md-hue-2" ng-true-value="'Checkbox 2'" ng-false-value="null">Checkbox 2</md-checkbox>

<md-checkbox ng-model="b.user[2]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[2]) > -1" ng-click="toggleSelection(user[2])" class="md-primary md-hue-2" ng-true-value="'Checkbox 3'" ng-false-value="null">Checkbox 3</md-checkbox>

<md-checkbox ng-model="b.user[3]" class="md-primary md-hue-2" ng-checked="selected.indexOf(user[3]) > -1" ng-click="toggleSelection(user[3])" class="md-primary md-hue-2" ng-true-value="'Checkbox 4'" ng-false-value="null">Checkbox 4</md-checkbox>

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

提交按钮后无法重新单击md-checkbox

1 个答案: