使用ng-model时未显示AngularJS输入字段值

时间:2016-11-08 04:49:56

标签: javascript angularjs

输入字段值未显示在输入字段中。我使用了 ng-model &的数据-NG-模型即可。如果不使用 ng-model ,则会显示值。

即1:

<input type="text" value="{{accountDetailsBody.phoneNumber}}" data-ng-model="vm.user.phoneno" name="phoneno" id="phoneno" class="form-control">

即2:

<input type="email" name="email" class="form-control" id="email" ng-model="vm.user.email" readonly ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" placeholder="Email" ng-maxlength="30" required>

控制器

 (function () {
        'use strict';
        angular
                .module('app')
                .controller('accountController', accountController);
        accountController.$inject = ['ApiService', '$rootScope', 'UserService', '$scope', '$location'];
        function accountController(ApiService, $rootScope, UserService, $scope, $location) {
            $scope.accountDetailsBody = {};
            var vm = this;
            vm.userUpdate = userUpdate;

            initController();
            function initController() {
                loadCurrentUser();
            }

            function userUpdate() {
                console.log(vm.user);
            }

function loadCurrentUser() {
            $scope.data = {'email': $rootScope.globals.currentUser.username};
            UserService.GetByUsername($scope.data).then(function (response) {
                if (response.success) {
                    $scope.accountDetailsBody = response.user[0];
                } else {
                    $location.path('/');
                }
                //vm.user = user;
            });
        }
        }

    })();

3 个答案:

答案 0 :(得分:0)

您应该使用value="accountDetailsBody.phoneNumber"代替value="{{accountDetailsBody.phoneNumber}}"

由于{{binding}}是单向绑定..而ng-mode="binding"是双向绑定。

答案 1 :(得分:0)

不要在html标签上使用value属性,你可以在控制器中为你的值分配ng-model值equels。

<input type="text"  data-ng-model="vm.user.phoneno" name="phoneno" id="phoneno" class="form-control">
控制器中的

this.user.phoneno=accountDetailsBody.phoneNumber

答案 2 :(得分:0)

这里不需要设置值。 您可以使用ng-model

将值直接绑定到输入文本框

试试这个

<强>控制器

    (function () {
        'use strict';
        angular
                .module('app')
                .controller('accountController', accountController);
        accountController.$inject = ['ApiService', '$rootScope', 'UserService', '$scope', '$location'];
        function accountController(ApiService, $rootScope, UserService, $scope, $location) {

            var vm = this;
            vm.accountDetailsBody = {};
            vm.userUpdate = userUpdate;

            initController();
            function initController() {
                loadCurrentUser();
            }

            function userUpdate() {
                console.log(vm.user);
            }

function loadCurrentUser() {
            $scope.data = {'email': $rootScope.globals.currentUser.username};
            UserService.GetByUsername($scope.data).then(function (response) {
                if (response.success) {
                    vm.accountDetailsBody = response.user[0];
                } else {
                    $location.path('/');
                }
                //vm.user = user;
            });
        }
        }

    })();

<强> HTML

<input type="text" ng-model="vm.accountDetailsBody.phoneNumber" name="phoneno" id="phoneno" class="form-control">