1

我有一个简单的代码，列出了许多颜色，并检查用户是否预先选择了一些颜色（这是在代码上设置的，但实际上它来自数据库）。当我提交表单时，预先检查的输入不会列在数组中，如果我取消选中一些，这不会从数组中删除。

const SampleApp = angular.module('SampleApp', [])

SampleApp.controller('sampleAppController', function($scope) {
    $scope.colors = ['red', 'green', 'blue', 'black', 'yellow', 'pink', 'white']
    $scope.preChecked = ['green', 'pink']
    $scope.user = { colors: [] }
    $scope.colorArr = []

    $scope.isUserColor = color => {
         return $scope.preChecked.some(uColor => color === uColor)
    }

    $scope.handleSubmit = () => {
        const filteredColors = $scope.colors.filter((color, index) => {
            return $scope.user.colors.some((uColor, uIndex) => {
                 return index === uIndex
            })
        })
        $scope.colorArr = filteredColors
    }    
})
<html lang="en" ng-app="SampleApp">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    </head>
    <div ng-controller="sampleAppController">
        <form ng-submit="handleSubmit()">
            <ul>
                <li ng-repeat="color in colors">
                    <input
                        type="checkbox"
                        name="{{color}}"
                        id="{{color}}"
                        ng-checked="isUserColor(color)"
                        ng-model="user.colors[$index]"
                        value="{{color}}"
                    >
                    <label for="{{color}}">{{color}}</label>
                </li>
            </ul>
            <button>Submit</button>
        </form>
        <div>{{colorArr}}</div>
    </div>
    </body>

</html>

4

1 回答 1

2

和指令不应该一起ng-model使用1ng-checked

从文档：

已检查

如果里面的表达式为真，则在元素上设置选中的属性ngChecked。

请注意，此指令不应与 一起使用ngModel，因为这可能会导致意外行为。

— AngularJS ng-checked 指令 API 参考

不要ng-model和ng-checked一起使用。用于ng-model双向绑定，ng-checked用于单向绑定。

<ul>
   <li ng-repeat="color in colors">
        <input
            type="checkbox"
            name="{{color}}"
            id="{{color}}"
            ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶i̶s̶U̶s̶e̶r̶C̶o̶l̶o̶r̶(̶c̶o̶l̶o̶r̶)̶"̶
            ng-model="user.colors[$index]"
            ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶c̶o̶l̶o̶r̶}̶}̶"̶
        >
        <label for="{{color}}">{{color}}</label>
    </li>
</ul>

而是从控制器初始化模型：

$scope.user = { colors: [] };
$scope.user.colors = $scope.colors.map(c => $scope.preChecked.some(_ => _ == c));
于 2019-11-23T18:22:45.653 回答