Display input value with Ng-Model referenced

Question

I am aware that I cannot set the value of an input when Ng-Nodel is referenced, but I am trying to find a work around.

The html value is being pulled from the URL variable (such as full name or email) that the user has entered in the previous page. Ng-model is being used to store these information. - signUp.php?user_email=$email&fname=$fullNam

Below is an example of what I mean,

 <?php
    $email = $_GET['user_email'];
    $fullName = $_GET['fname'];

    ?>


<input id="signupformItem"  ng-model="user.username" type="email" name="email"   value= <?php echo $email; ?> placeholder="Email Address" required> <br>

Any help would be greatly appreciated

Answer 1

I just created a demo for you but I will recommend you to go through some series of tutorial to get better knowledge of the framework or technology(angularjs and javascript) you are going to use in your project.

I created plunk for you. You can visit it here .

Javascript code

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, userService) {
  $scope.name = 'World';
  $scope.userName = userService.getUsers();
  userService.getUserAjax()
  .success(function(response) {$scope.names = response[0].Name;});
});

app.service('userService', function($http){
    var fac = {};
    fac.getUserAjax = function() {
     return $http.get("http://www.w3schools.com//website/Customers_JSON.php");
    };
    fac.getUsers = function(){ return 'John'}; 
    return fac;
});

HTML code

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    by {{userName}}

    <p>username loaded by ajax :{{names}}</p>
  </body>

</html>

You need to define one service that communicate to your web page using ajax service provided by angular ( $http ) and call it from the controller and on the success function just pick up the value and assign it to your scope variable. In your case username.

I just used w3schools service url here just for demonstration which would give me a list of users you need to implement php code that would return what you want and use it like described above.

I hope it would have given you basic idea of how to setup angular code to communicate to the server.

Display input value with Ng-Model referenced

Question

1 answers

solution1
0 ACCPTED 2015-02-22 16:43:35

Display input value with Ng-Model referenced

Question

1 answers

solution1 0 ACCPTED 2015-02-22 16:43:35

solution1
0 ACCPTED 2015-02-22 16:43:35