Wie durch <a href="http://meanjs.org/" rel="nofollow">meanjs</a> Die Beispielanwendung Mongoose Modell mit AngularJS Checkbox

Question

Ich versuche, um die Beispielanwendung zu modifizieren, zur Verfügung gestellt binden, um eine angularsjs Ansicht hat, die als

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

Der Teil des Mungo-Modell, das die Updates folgt aussieht Rollen ist wie folgt.

/** 
* 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 
    } 
}); 

Jetzt versuche ich die obige Texteingabe in Kontrollkästchen zu konvertieren. Meine modifizierte Ansicht ist eine

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

Mein AngularJS Controller, die die Rollen aktualisiert folgt wie folgt

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; 
} 

Jedes Mal, wenn die Seite, um die Rollen für die Benutzer korrekt zugeordnet geladen wird, sondern immer dann, wenn ich auf die Check-Box Alle drei Kontrollkästchen werden ausgewählt. Wie binde ich das Kontrollkästchen, um es zu enumerieren und an das Modell zu senden?

Answer 1

Wie sieht Ihr Modell aus? Ich würde vorschlagen, ein ui-select https://github.com/angular-ui/ui-select anstelle der mehreren Checkboxen zu verwenden, da es viel sauberer UX ist und weniger Controller-Code zu pflegen. Anschließend können Sie eine Aufzählung von Rollen erstellen, die verwaltet werden kann. Der gesamte Code wird weiterhin diese Aufzählung von Rollen verwenden. Viel einfacher zu verwalten.

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

Hier ist mein Eigentum im User Model:

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

In meinem Steuerungsbereich die Rollen OR Dependency Injection verwenden, um die globalen Aufzählungen/Rollen zu laden, wie oben beschrieben:

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

Für das Front End/Angular verwende ich eine UI-Auswahl

{{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>