Using angular databind to retrieve and display information from Parse

Question

I am using angular databind to retrieve and display information from Parse. In particular, what I want is that the ObjectID that the user enters in the textfield is used in the query.get to retrieve various information for that particular user. This does not seems to work, and I am wondering if there is a typo in the code.

Below is the Javascript code:

Parse.initialize("ID", "ID");


angular.module('AuthApp', [])
.run(['$rootScope', function($scope) {
  $scope.scenario = 'Sign up';
  $scope.currentUser = Parse.User.current();


  $scope.signUp = function(form) {
    var user = new Parse.User();
    user.set("password", form.password);
        user.set("username", form.username);

    user.signUp(null, {
      success: function(user) {
window.location = 'myprofile.php'
      },
      error: function(user, error) {
        alert("Unable to sign up:  " + error.code + " " + error.message);
      }
    });    
  };

  $scope.userIdChanged = function () {
    var query = new Parse.Query(Parse.User);

    query.get($scope.userId, {
      success: function(userInfo) {
        // The object was retrieved successfully.
        var address = userInfo.get("Address");
        $scope.address = 'Address: ' + address;
      },
      error: function(object, error) {
        // The object was not retrieved successfully.
        // error is a Parse.Error with an error code and message.
      }
    });
  };

In particular, this is the part that is affected:

$scope.userIdChanged = function () {
    var query = new Parse.Query(Parse.User);

    query.get($scope.userId, {
      success: function(userInfo) {
        // The object was retrieved successfully.
        var address = userInfo.get("Address");
        $scope.address = 'Address: ' + address;
      },
      error: function(object, error) {
        // The object was not retrieved successfully.
        // error is a Parse.Error with an error code and message.
      }
    });
}

Below is the html part:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
<!--======================================================================-->
<!--Custom website css file is linked here-->
<link href="css/style1.css" rel="stylesheet">
<!--Font Awesome CSS link-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--=================================================-->
<!--Javascript file linked here-->
<script src="js/bootstrap.min.js"></script>
<script src="js/personal.js"></script>
    <script src="js/functions.js"></script>

<meta charset=utf-8 />
<title>Admin Panel</title>



});
</script>
</head>
<body ng-app="AuthApp">


  <div ng-show="currentUser">


  userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
    <div>{{addresss}}</div>





  </div>
</body>
</html>

Any help would be greatly appreciated.

Update: below is the result shown:

在此处输入图片说明

Below is the html code:

<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>

    <script src="js/functions.js"></script>

  <script src="angular.js"></script>



</head>
<body ng-app="AuthApp">
    <div ng-controller="MyCntrl">
         userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
            <div>{{addresss}}</div>
        ...
    </div>
    </body>
</html>

Below is the javascript:

Parse.initialize("id", "id");


var module = angular.module("AuthApp", []);

module.controller("MyCntrl", function($scope){

$scope.userIdChanged = function () {
    // now access $scope.userId here
    var query = new Parse.Query(Parse.User);

    query.get($scope.userId, {
      success: function(userInfo) {
        // The object was retrieved successfully.
        var address = userInfo.get("Address");
        $scope.address = 'addresss: ' + address;
      },
      error: function(object, error) {
        // The object was not retrieved successfully.
        // error is a Parse.Error with an error code and message.
      }
    }
  };

});

Answer 1

Associate a controller with the module to access $scope value in the scope method. Sample code is given below:

Html

<html>
    <head>
        ...
    </head>
    <body ng-app="AuthApp">
    <div ng-controller="MyCntrl">
         userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
            <div>{{addresss}}</div>
        ...
    </div>
    </body>
</html>

Js

var module = angular.module("AuthApp", []);

module.controller("MyCntrl", function($scope){

$scope.userIdChanged = function () {
    // now access $scope.userId here
  };

});

Try this, will help you.

Using angular databind to retrieve and display information from Parse

Question

1 answers

solution1
0 ACCPTED 2015-01-02 14:30:20

Html

Js

Using angular databind to retrieve and display information from Parse

Question

1 answers

solution1 0 ACCPTED 2015-01-02 14:30:20

Html

Js

solution1
0 ACCPTED 2015-01-02 14:30:20