Question

我填写后将角色js中的个人资料页面发送给DB。然后再次如果我回到同一个个人资料页面，我在该领域没有得到任何价值。

profile.html

<form name="profileForm">
            <br/>

                <div flex style="max-width:700px;">
                    <md-input-container class="md-block">
                    <label>Name</label>
                    <input ng-model="vm.name"></input>
                </md-input-container>
                </div>

                <div flex style="max-width:700px;">
                    <md-input-container class="md-block">
                        <label>Mobile Number</label>
                        <input ng-model="vm.mobile"></input>
                    </md-input-container>
                </div>

                <div flex style="max-width:700px;">
                    <md-input-container class="md-block">
                        <label>Email</label>
                        <input ng-model="vm.email"></input>
                    </md-input-container>
                </div>  

                <div flex style="max-width:700px;">
                <label>DOB:</label>
                    <md-datepicker ng-model="vm.profileForm.dob" md-placeholder="Enter date">
                    </md-datepicker>
                </div>

                <div flex style="max-width:700px;">
                    <md-input-container class="md-block" >
                        <label>Country</label>
                        <md-select ng-model="vm.profileForm.Country" ng-change="vm.getCountryStates()">
                            <md-option ng-repeat="countryName in vm.countries" value="{{countryName.id}}" >
                                {{countryName.country}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                </div>

                <div flex style="max-width:700px;">
                    <md-input-container class="md-block" >
                        <label>State</label>
                        <md-select ng-model="vm.profileForm.State"  ng-change = "vm.getStateCities()">
                            <md-option ng-repeat="stateName in vm.states" value="{{stateName.Id}}">
                                {{stateName.state}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                </div>

                <div flex style="max-width:700px;">
                    <md-input-container class="md-block" >
                        <label>City</label>
                        <md-select ng-model="vm.profileForm.City">
                            <md-option ng-repeat="cityName in vm.cities" value="{{cityName.Id}}">
                                {{cityName.city}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                </div>

                <div flex style="max-width:700px;">
                    <md-input-container class="md-block" >
                        <label>Postal Code</label>
                        <input name="postalCode" ng-model="vm.profileForm.postalCode" ng-pattern="/^[0-9]{6}$/" md-maxlength="6">
                    </md-input-container>
                </div>

                <span style="color:green; font-size:20px;">{{vm.message}}</span>

                <div layout="row" layout-align="space-between center">
                    <div>
                        <img src="assets/icons/fonts/backArrow.png" alt="image caption" style="width:18px; height:18px">
                        <a ng-href ng-click="vm.nextTab()" >Back</a>
                    </div>
                    <div style="margin-right:300px">
                        <a ng-href="http://localhost:3000/pages/dashboard">Skip</a>
                        <md-button class="md-raised md-primary" ng-click="vm.profileInfo(vm.profileForm);">Save & Continue</md-button>
                    </div>
                </div>
            </form>

在图片中，前三个值通过ngStorage，填充后的剩余字段数据存储在DB中。对于chekcBox，我使用了级联下拉列表。

profile.js

(function ()
 {
'use strict';

angular
    .module('app.invite-friends')
    .controller('InviteFriendsController', InviteFriendsController);

/** @ngInject */
function InviteFriendsController(Friendslist, $localStorage, $scope, $http, $location, CustomerService)
{
    var vm = this;

    vm.countries = CustomerService.getCountry();

    vm.getCountryStates = function(){
        vm.states = CustomerService.getCountryState(vm.profileForm.Country);    
        vm.cities =[];
    }

    vm.getStateCities = function(){
        vm.cities = CustomerService.getStateCity(vm.profileForm.State);
    }

    vm.uid = $localStorage._id;

    vm.profileInfo = function(userData){
        $http({
            url:'http://192.168.2.8:7200/api/profile_save',
            method:'POST',
            data: {info:userData, loginId:vm.uid}
        }).then(function(res){
            if(res.data.success){
                vm.message = 'Your profile information has been saved successfully.';
                $location.path('/pages/dashboard')
            } 
        }, function(error){
            alert(error.data);
        });
    };

    $http({
        url:'http://192.168.2.8:7200/api/checkIfExists',
        method:'POST',
        data: {userId: vm.uid}
    }).success(function(res){
        vm.name = res.result[0].name;
        vm.mobile = res.result[0].mobile;
        vm.email = res.result[0].email;
        vm.DOB = res.result[0].DOB;
        vm.Country = res.result[0].Country;
        vm.State = res.result[0].State;
        vm.City = res.result[0].City;
        vm.postalCode = res.result[0].PostCode;
    }, function(error){
        alert(error.data);
    });
     }
   })();

Answer 1

所有ng-model都是在视图中获取或更新数据到vm.profileForm，在这种情况下，当您设置数据以查看表单控制器时，您要向vm添加属性，而不是向vm.profileForm

添加属性

在$ http成功中更改以下代码从

vm.DOB = res.result[0].DOB; vm.Country = res.result[0].Country; vm.State = res.result[0].State; vm.City = res.result[0].City; vm.postalCode = res.result[0].PostCode;

到

vm.profileForm.dob = res.result[0].DOB; vm.profileForm.Country = res.result[0].Country; vm.profileForm.State = res.result[0].State; vm.profileForm.City = res.result[0].City; vm.profileForm.postalCode = res.result[0].PostCode;

如何从客户端发送数据后从DB获取数据？

1 个答案: