预先检查的输入框未被序列化

Question

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

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>

Answer 1

`ng-model` 和 `ng-checked` 指令不应一起使用¹

来自文档：

ngChecked

Sets the checked attribute on the element, if the expression inside ngChecked is truthy.

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

— AngularJS ng-checked Directive API Reference

不要同时使用 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));

预先检查的输入框未被序列化

Pre-checked inputbox are not being serialized

javascript

angularjs

angularjs-ng-model

angularjs-ng-checked

`ng-model` 和 `ng-checked` 指令不应一起使用¹

ngChecked

预先检查的输入框未被序列化

Pre-checked inputbox are not being serialized

javascript

angularjs

angularjs-ng-model

angularjs-ng-checked

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

ngChecked

`ng-model` 和 `ng-checked` 指令不应一起使用¹