javascript - 预先检查的输入框没有被序列化
问题描述
我有一个简单的代码,列出了许多颜色,并检查用户是否预先选择了一些颜色(这是在代码上设置的,但实际上它来自数据库)。当我提交表单时,预先检查的输入不会列在数组中,如果我取消选中一些,这不会从数组中删除。
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>
解决方案
和指令不应该一起ng-model
使用1ng-checked
从文档:
已检查
如果里面的表达式为真,则在元素上设置选中的属性
ngChecked
。请注意,此指令不应与 一起使用
ngModel
,因为这可能会导致意外行为。
不要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));
推荐阅读
- c++ - 具有回溯和 DP 的不同输出
- php - 将 PHP 片段放在另一个单引号变量中
- javascript - 为什么我对 Printful API 的请求被拒绝访问?
- php - 使用 with() 从 laravel 中的 DB 中仅选择必填字段
- angularjs - 如何使用适当的数据 json 对象预选 Angular-ui-bootstrap 自动完成
- javascript - 动态复选框不保存到数据库
- javascript - 禁用除选定选项之外的所有选项到使用 ng-repeat 生成的列表中
- ios - 在我的 iPhone 上运行 Xcode 项目
- hyperledger-fabric - 如何使用fabric ca详细构建中间CA服务器?
- reactjs - 如何在 React 中使用 Jest 和 Enzyme 测试组件中的道具是否正确呈现