Get values (javascript code) from view

ng-model.md

• You want to create a login form, you need get username & password from html inputs when user click login button, code should like that

<!-- html code, view-->
<div class="list">
    <label class="item item-input">
        <input type="text" placeholder="Username" ng-model="user.username">
    </label>
    <label class="item item-input">
        <input type="password" placeholder="Password" ng-model="user.password">
    </label>
    <div class="padding">
        <button class="button button-full button-positive" ng-click="login()">
            Log In
        </button>
    </div>
</div>

// in controller, javascript
$scope.user = {};
$scope.login = function() {
  var username = $scope.user.username;
  var password = $scope.user.password;
  
  // do something using username, password variable
};

• You notice that I put username & password into user object. What happened if you access username & password directly like that?

<!-- html code, view-->
<input type="text" placeholder="Username" ng-model="username">
<input type="password" placeholder="Password" ng-model="password">

// in controller, javascript
$scope.username = '[email protected]';
$scope.password = '123456789';
// login event ...

User will see value of textboxes are '[email protected]' for username input and '123456789' for password input, mean that values of textboxes are copied from $scope.username and $scope.password by ng-model. After user change username and password and click "submit" button, $scope.username and $scope.password will not be changed in login(); on the other hand, value of variables are: username='[email protected]' and password='123456789'.

• If html code is

<input type="text" placeholder="Username" ng-model="username">
<p>{{username}}</p>

When user change username input, text in <p> will be updated. So username model in html is data-binding (in view), is copied from $scope.username (is different version of $scope.username)

• To get values from view

  • use object for ng-model attributes in <input> (in view), like first code block, object is user
  • initialize the object in controller (javascript), like that $scope.user = {}; Notice that you don't need define username & password when initializing user object, they will be added into $scope.user from view automatically by ng-model="user.username" and ng-model="user.password"

• Another way to get username & password in login() function is that defining username & password in login(username, password), so now you don't need define $scope.user in controller. Notice that $scope.username and $scope.password is undefined. But in my opinion, I like first way, using $scope.user = {};

<!-- html code, view-->
<div class="list">
    <label class="item item-input">
        <input type="text" placeholder="Username" ng-model="username">
    </label>
    <label class="item item-input">
        <input type="password" placeholder="Password" ng-model="password">
    </label>
    <div class="padding">
        <button class="button button-full button-positive" ng-click="login(username, password)">
            Log In
        </button>
    </div>
</div>

// in controller, javascript
$scope.login = function(username, password) {
  console.log($scope.username); // undefined
  console.log($scope.password); // undefined
  // do something using username, password variable
};

if js change $scope.var, var in template will be changed but not reverse (will be write it clearly)