如何将 Mongoose 模型与 angularjs 复选框绑定

Posted 2023-03-11

【中文标题】如何将 Mongoose 模型与 angularjs 复选框绑定

【英文标题】：How to bind Mongoose model with angularjs Checkbox

【发布时间】：2016-08-10 21:59:14

【问题描述】：

我正在尝试修改meanjs提供的示例应用程序 示例应用程序有一个 angularsjs 视图，如下所示

  <input class="form-control" type="text" name="roles" 
  ng-model="vm.user.roles" id="roles" ng-list required />

mongoose 模型中更新角色的部分如下。

/**
 * Module dependencies
 */
var mongoose = require('mongoose'),
  Schema = mongoose.Schema,
  crypto = require('crypto'),
  validator = require('validator'),
  generatePassword = require('generate-password'),
  owasp = require('owasp-password-strength-test'),
  path = require('path'),
  logger = require(path.resolve('./config/lib/logger'));
/**
 * A Validation function for local strategy properties
 */
var validateLocalStrategyProperty = function (property) 
  return ((this.provider !== 'local' && !this.updated) || property.length);
;

/**
 * A Validation function for local strategy email
 */
var validateLocalStrategyEmail = function (email) 
  return ((this.provider !== 'local' && !this.updated) || validator.isEmail(email,  require_tld: false ));
;

var validateRoles = function (roles) 
  console.log("validate");
  return true;
;
/**
 * User Schema
 */
var UserSchema = new Schema(
  firstName: 
    type: String,
    trim: true,
    default: '',
    validate: [validateLocalStrategyProperty, 'Please fill in your first name']
  ,
  lastName: 
    type: String,
    trim: true,
    default: '',
    validate: [validateLocalStrategyProperty, 'Please fill in your last name']
  ,
  displayName: 
    type: String,
    trim: true
  ,
  email: 
    type: String,
    unique: true,
    lowercase: true,
    trim: true,
    default: '',
    validate: [validateLocalStrategyEmail, 'Please fill a valid email address']
  ,
  username: 
    type: String,
    unique: 'Username already exists',
    required: 'Please fill in a username',
    lowercase: true,
    trim: true
  ,
  password: 
    type: String,
    default: ''
  ,
  salt: 
    type: String
  ,
  profileImageURL: 
    type: String,
    default: 'modules/users/client/img/profile/default.png'
  ,
  provider: 
    type: String,
    required: 'Provider is required'
  ,
  providerData: ,
  additionalProvidersData: ,
  roles: 
    type: [
      type: String,
      enum: ['USR', 'ADM', 'SAD']
    ],
    default: ['USR'],
    required: 'Please provide at least one role',
    validate: [validateRoles, 'Please provide at least one role']
  ,
  updated: 
    type: Date
  ,
  created: 
    type: Date,
    default: Date.now
  ,
  /* For reset password */
  resetPasswordToken: 
    type: String
  ,
  resetPasswordExpires: 
    type: Date
  
);

现在我正在尝试将上述文本输入转换为 checkbox 。我修改后的观点如下

  <label ng-repeat="rolename in vm.rolesnames">
  <input type="checkbox" text=rolename 
  ng- checked="vm.chooserole(rolename)" ng-model="vm.user.roles">
  rolename
  </label>

我的 Angularjs 控制器更新角色如下

vm.rolesnames = ['USR', 'ADM', 'SAD']; //dummy for view
vm.userused = new Set(user.roles);// this is from model

function chooserole(rolename) 
  console.log("chooserole");
  if (rolename === 'USR') 
    return vm.userused.has('USR');
   else if (rolename === 'ADM') 
    return vm.userused.has('ADM');
   else if (rolename === 'SAD') 
    return vm.userused.has('SAD');
  
  return false;

每当加载页面时，都会正确分配用户的角色，但每当我单击复选框时，所有三个复选框都会被选中。 如何将复选框绑定到枚举并将其发送到模型？

【参考方案1】：

你的模型是什么样的？我建议使用 ui-select https://github.com/angular-ui/ui-select 而不是多个复选框，因为它更简洁的用户体验和更少的控制器代码需要维护。然后，您可以创建一个角色枚举，并且可以对其进行管理，并且您的所有代码将继续使用该角色枚举。更容易管理。

angular.module('globals', [])
  .constant('Roles', ['USR', 'ADM', 'SAD']);

这是我在用户模型中的属性：

  roles: 
    type: Array,
    default: ['USR']
  

在我的控制器范围内，角色或使用依赖注入来加载全局枚举/角色，如上所述：

$scope.rolesNames = ['USR', 'ADM', 'SAD];

对于前端/Angular，我使用 UI 选择

  user
  <br/>  
           <ui-select multiple ng-model="user.roles" theme="select2" ng-disabled="disabled" style="width: 300px;">
            <ui-select-match placeholder="Select roles..."> $item </ui-select-match>
            <ui-select-choices repeat="role in rolesNames">
               role 
            </ui-select-choices>
          </ui-select>

【讨论】：

感谢您的回答。我已经更新了整个模型。我将尝试使用 ui-select 模块来替换复选框。

我试着做你想要使用的复选框方法，它很乱。可以修复您的方法，但是同步复选框然后更新用户对象需要做很多额外的工作，所以我不建议这样做。

@Rengas 效果如何？如果对您有用，请将我的答案标记为正确。谢谢

我认为问题是因为清单总是与一个模型相关联。因为我对meanjs很陌生。在尝试用您的答案更改应用程序中的内容的过程中，我迷路了。在某一时刻，我什至不确定自己在做什么。所以现在我通过使用checklist-model 解决了它。谢谢你的回答。