如何设置ng-select来记录记录的值?

时间:2014-05-27 07:52:20

标签: angularjs

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>

0 个答案:

没有答案