javascript - 默认情况下,Angularjs复选框在加载时选中,在具有ng-true-value的表单中不起作用
问题描述
我知道有类似的问题,但此复选框位于表单内。如何在加载时默认选中“订阅”复选框?
这是我的 HTML 的一部分:
<div ng-app="app9" ng-cloak>
<div ng-controller="userCtrl">
<form name="userForm" ng-submit="saveUser(userInfo)">
<label>First Name :</label>
<input type="text" name="fname" ng-model="userInfo.fName"/>
<br />
<label>Last Name :</label>
<input type="text" name="lname" ng-model="userInfo.lName"/>
<br />
<label>Street :</label>
<input type="text" name="street" ng-model="userInfo.street"/>
<br />
<label>Subscribe :</label>
<input type="checkbox" name="subscribe" ng-model="userInfo.subscribe" />
<br />
<label>Delivery Method :</label>
<select name="delivery" ng-model="userInfo.delivery" ng-required="true" >
<option value="Email">Email</option>
<option value="Mail">Mail</option>
</select>
<br /><br />
<input type="submit" value="Save" ng-disabled="userForm.$invalid"/>
<ul>
<li ng-repeat="item in user">
{{'User: ' + item.fName + ' ' + item.lName + ' ' + item.street + ' ' + item.subscribe + ' ' + item.delivery}}
</li>
</ul>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="js/exam9.js"></script>
</body>
这是我的 Javascript 考试 9.js:
var app9 = angular.module('app9', []);
app9.controller('userCtrl', function ($scope) {
userInfo.subscribe = true;
$scope.saveUser = function (userInfo) {
if ($scope.userForm.$valid) {
$scope.user.push({
fName: userInfo.fName,
lName: userInfo.lName,
street: userInfo.street,
subscribe: userInfo.subscribe,
delivery: userInfo.delivery
});
console.log("User saved");
} else {
console.log("Error: Couldn't save user")
}
}
});
我试过 userInfo.subscribe = true 和 $scope.userInfo.subscribe = true。
更新:对不起,这可能是一个重复的问题。它对我不起作用的原因是因为我最初有这个:
<input type="checkbox" name="subscribe" ng-model="userInfo.subscribe" ng-true-value="'Subscribe'" ng-false-value="'Don\'t Subscribe'"/>
以下对我不起作用:
$scope.userInfo = {};
$scope.userInfo.subscribe = true;
它应该是:
$scope.userInfo = {};
$scope.userInfo.subscribe = 'Subscribe';
解决方案
您应该首先在 $scope 上声明您的 userInfo 对象。
使用此代码对我有用:
var app9 = angular.module('app9', []);
app9.controller('userCtrl', function ($scope) {
$scope.userInfo = {};
$scope.userInfo.subscribe = true;
$scope.saveUser = function (userInfo) {
if ($scope.userForm.$valid) {
$scope.user.push({
fName: userInfo.fName,
lName: userInfo.lName,
street: userInfo.street,
subscribe: userInfo.subscribe,
delivery: userInfo.delivery
});
console.log("User saved");
} else {
console.log("Error: Couldn't save user")
}
}
});
推荐阅读
- java - Java缓存库mapdb过期最大大小
- java - 我可以在 Morphia 中使用原始查询吗?
- javascript - 如何读取和更改使用 html 或 xhtml 中的图像标签包含的 svg 文件中的元素?
- asp.net - 我应该使用基于角色的身份验证吗?
- php - 使用 CORS 和 Angular 上传 HTTP 文件
- string - 从 Bash 的变量中删除所有匹配“(True)”或“(False)”的行?
- android - ItemTouchHelper.Callback 让我只打开一项
- html - Visual Studio 2017 Angular 材料智能感知和代码片段
- git - 如何删除 Visual Studio 代码中 git 的更改?
- python - Nessus 文件上传 REST API