Nipuna Dilhara Nipuna Dilhara - 8 days ago 8
Node.js Question

how to pass data to server which were fetched from database to text boxes, using ng-model,ng-value or any other method

I fetch data from database and show them in text boxes using ng-value. Then I tried to bind text box's data using ng-model and pass them again to database in order to update database data.It works fine only if I changed values in both text boxes.But this method doesn't take values which were loaded using ng-value.



$scope.showData = function(userName) {
//$scope.userName=userName;
console.log(userName);
$http.get('/api/personalData/' + userName)
.success(function(data) {
if (data.error) {
$scope.errorMsg = data.error;
console.log("Data havn't retrieved");

} else {
$scope.personalData = data.personalData;
console.log("Data retrieved successfully");
console.log($scope.personalData);
}

});
};
$scope.editUser = function(userName) {
$scope.personal = {
'age': $scope.personal.age
};
//$scope.userName=userName;
console.log("name:" + userName);
$http.post('/api/editPersonalData/' + userName, $scope.personal)
.success(function(data) {
if (data.error) {
$scope.errorMsg = data.error;
console.log("Data havn't been sent");
} else {
console.log("Data sent successfully");
console.log(data.personalData);
}

});
};


In Node.js file,

app.get('/api/personalData/:userName', function(req, res) {
var userName = req.params.userName;
con.query("Select * from users where username=?", [userName], function(err, result) {
if (!err) {
res.json({
personalData: result
});
console.log("successfully sent");
console.log({
personalData: result[0]
});
} else {
res.json({
error: "Error while performing query"
});
console.log("Error while performing query:" + err);
}
});
});

app.post('/api/editPersonalData/:userName', function(req, res) {
var userName = req.params.userName;


var name = req.body.name;
var age = req.body.age;
console.log(userName + "," + name + "," + age);
//console.log(name+","+age+","+userName);
con.query("UPDATE users SET name=?,age=? WHERE username=?", [name, age, userName], function(err, result) {
if (!err) {
res.json({
success: 'data updated'
});
console.log("success");
} else {
res.json({
error: 'Error while performing query'
});
console.log("Error while performing query." + err);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="updateform">
<div class="modal-body row">
<div class="form-group">
<label class="control-label col-sm-2">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control text-right" ng-value="personalData[0].name" ng-model="personal.name" required autofocus/>
</div>
<br>
<br>
<br>
<label class="control-label col-sm-2">Age:</label>
<div class="col-sm-10">
<input type="text" class="form-control text-right" ng-value="personalData[0].age" ng-model="personal.age" required autofocus/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="editUser(personalData[0].username)">Save</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</form>




Answer

Short answer: You can't do like that.

Try this instead:

$http.get(...)
  .success(function(data) {
    if (data.error) {
      // ...
    } else {
      $scope.personalData = data.personalData;
      // Bind default value for $scope.personal here
      $scope.personal = data.personalData[0];
    }
  });

and in the HTML:

<input type="text" ng-model="personal.name">
<input type="text" ng-model="personal.age">