stack:angular,mongoose,node 我们有两个模型,一个是资格(id和名称),一个是用户(几个属性,但也是对象参考资格。
qualification: {type : Schema.ObjectId, ref : 'Qualification'}
在我们的角度视图中,在渲染之前我们使用$ http从后端加载选定的用户并显示不同的输入字段。 我们还想在下拉列表中显示可能的资格,并确保选中当前分配的。
在此片段中,您会看到: 1°{{user.qualification}}正确显示存储在mongo中的所选限定的ID 2°下拉列表正确填充 如果我通过选择一个更改下拉列表的值,则为3°,它将在
标记中更新 4°如果我在此表单中调用我的保存方法,则所选值将保存在mongo
中唯一不起作用的是下拉列表的初始状态设置为当前用户资格。
<p>{{user.qualification}}</p>
<div class="form-group">
<label class="col-md-2 control-label">Qualification</label>
<div class="col-md-2" >
<select data-ng-model="user.qualification"
name = "user.qualification"
data-ng-options="qual._id for qual in qualifications">
</select>
</div>
</div>
控制器
$scope.findOneUser = function() {
$http.get('/administration/showuser/'+$stateParams.userID)
.success(function(data){
$scope.user = data;
$scope.fetchQualifications();
})
.error(function(data){
alert('error');
});
};
$scope.fetchQualifications = function() {
$http.get('/administration/qualifications')
.success(function(data){
$scope.qualifications = data;
})
.error(function(data){
alert('error');
});
};
查看
<section data-ng-controller="AdministrationController" data-ng-init="findOneUser()" >
<h3>Edit User{{user._id}}</h3>
<form class="form-horizontal col-md-12" role="form" data-ng-submit="updateUser()">
<!-- LEFT -->
<div class="col-md-5">
<div class="form-group">
<label for="firstName" class="col-md-2 control-label">FirstName</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.personal.firstName" id="firstName" placeholder="Firstame" >
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-md-2 control-label">Lastname</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.personal.lastName" id="lastName" placeholder="Lastname" >
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-md-2 control-label">Mobile</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.contact.mobile" id="mobile" placeholder="Mobile" >
</div>
</div>
<div class="form-group">
<label for="phone" class="col-md-2 control-label">Phone</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.contact.phone" id="phone" placeholder="Phone" >
</div>
</div>
<div class="form-group">
<label for="featured" class="col-md-2 control-label">Featured</label>
<div class="col-md-2">
<input type="checkbox" class="form-control" data-ng-model="user.featuredArtist" data-ng-checked="user.featuredArtist" id="featured" >
</div>
</div>
</div>
<!-- RIGHT -->
<div class="col-md-7">
<div class="form-group">
<label for="street" class="col-md-2 control-label">Street</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.address.street" id="street" placeholder="Street" >
</div>
</div>
<div class="form-group">
<label for="postalCode" class="col-md-2 control-label">Postal code</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.address.postalCode" id="postalCode" placeholder="Postal code" >
</div>
</div>
<div class="form-group">
<label for="city" class="col-md-2 control-label">City</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.address.city" id="city" placeholder="City" >
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 control-label">State</label>
<div class="col-md-10">
<input type="text" class="form-control" data-ng-model="user.profile.address.state" id="state" placeholder="State" >
</div>
</div>
<div class="form-group">
<label for="blocked" class="col-md-2 control-label">Blocked</label>
<div class="col-md-2">
<input type="checkbox" class="form-control" data-ng-model="user.blocked" data-ng-checked="user.blocked" id="blocked" >
</div>
</div>
**<p>{{user.qualification}}</p>
<div class="form-group">
<label class="col-md-2 control-label">Qualification</label>
<div class="col-md-2" >
<select data-ng-model="user.qualification"
name = "user.qualification"
data-ng-options="qual._id for qual in qualifications">
</select>
</div>
</div>**
</div>
<div class="form-group">
<div class="col-md-offset-5 col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="cancel" class="btn btn-default" ng-click="cancelUser()">Cancel</button>
</div>
</div>
</form>
</section>