使用复选框正确显示用户编辑表单(CRUD 模型)
Proper display of user editing form (CRUD model) with checkbox
我正在制作一个带有输入复选框的简单 CRUD 模型。我在服务器端没有问题,一切都很好。我使用 NodeJS +MongoDB。但是我在编辑现有用户时遇到问题。当我使用选中的复选框编辑现有用户时(我得到 JSON 带有参数 checked=true
的对象)我应该如何使用 JS 显示它?
这是我的 users.js 文件的一部分,位于 /routes/ 文件夹
var express = require('express');
var router = express.Router();
var User = require('../../models/User');
var rest = require('restler');
router.get('/adduser', function(req, res){
var user = new User();
user.contacts.push({phone: '', email: ''});
rest.get('http://localhost:3000/api/adduser').on('complete', function(data) {
res.render('users/add', { title: 'Add New Users' , n: user});
});
});
这是文件的 views/users/fields.jade 部分,以便更好地理解:
.form-group
label.col-sm-2.control-label(for='email') E-mail:
.col-sm-10
input(type="email", placeholder="email", name="email", value = n.contacts[0].email,required)
.form-group
.col-sm-offset-2.col-sm-10
input#enabled(type="checkbox",style='text-align: center; vertical-align: middle;',placeholder="", name="enabled", value = n.enabled)
| Enable user
所以我的问题是我不明白在加载现有用户时我应该如何显示该复选框确实被选中。
如果选中用户属性 n.enabled=true
,如果未选中 n.enabled=false
。因此,如果在加载该用户时检查用户,我需要检查输入字段。
我试过按以下方式进行操作,但它写信给我说 n 没有定义......而且我不知道如何将 n 作为该函数的参数传递:
$(document).ready(function(){
if(n.enabled=="true"){$("enabled").toggle(this.checked);}
});
对 id-selectors
使用 #
并直接使用 n.enabled
来隐藏或显示您的元素,例如,
$("#enabled").toggle(n.enabled);
//-^ prepend # before id selectors
toggle() will show/hide your element, To check uncheck use the prop() 喜欢
$(document).ready(function(){
$("#enabled").prop("checked",n.enabled);
});
在fields.jade
中,将value = n.enabled
更改为checked = (n.enabled ? 'checked' : '')
我正在制作一个带有输入复选框的简单 CRUD 模型。我在服务器端没有问题,一切都很好。我使用 NodeJS +MongoDB。但是我在编辑现有用户时遇到问题。当我使用选中的复选框编辑现有用户时(我得到 JSON 带有参数 checked=true
的对象)我应该如何使用 JS 显示它?
这是我的 users.js 文件的一部分,位于 /routes/ 文件夹
var express = require('express');
var router = express.Router();
var User = require('../../models/User');
var rest = require('restler');
router.get('/adduser', function(req, res){
var user = new User();
user.contacts.push({phone: '', email: ''});
rest.get('http://localhost:3000/api/adduser').on('complete', function(data) {
res.render('users/add', { title: 'Add New Users' , n: user});
});
});
这是文件的 views/users/fields.jade 部分,以便更好地理解:
.form-group
label.col-sm-2.control-label(for='email') E-mail:
.col-sm-10
input(type="email", placeholder="email", name="email", value = n.contacts[0].email,required)
.form-group
.col-sm-offset-2.col-sm-10
input#enabled(type="checkbox",style='text-align: center; vertical-align: middle;',placeholder="", name="enabled", value = n.enabled)
| Enable user
所以我的问题是我不明白在加载现有用户时我应该如何显示该复选框确实被选中。
如果选中用户属性 n.enabled=true
,如果未选中 n.enabled=false
。因此,如果在加载该用户时检查用户,我需要检查输入字段。
我试过按以下方式进行操作,但它写信给我说 n 没有定义......而且我不知道如何将 n 作为该函数的参数传递:
$(document).ready(function(){
if(n.enabled=="true"){$("enabled").toggle(this.checked);}
});
对 id-selectors
使用 #
并直接使用 n.enabled
来隐藏或显示您的元素,例如,
$("#enabled").toggle(n.enabled);
//-^ prepend # before id selectors
toggle() will show/hide your element, To check uncheck use the prop() 喜欢
$(document).ready(function(){
$("#enabled").prop("checked",n.enabled);
});
在fields.jade
中,将value = n.enabled
更改为checked = (n.enabled ? 'checked' : '')