I am having some "problems" reading an ng-model from the controller.
I want to do this:
<input type="text" ng-model="code">
<button ng-click="setCode()">Login</button>
And in my controller access that variable like this:
$scope.setCode = function(){
alert($scope.code);
}
That is what I want to do but my code variable is undefined.
I found 2 ways to get this to work:
1) Passing the variable as an argument
<input type="text" ng-model="code">
<button ng-click="setCode(code)">Login</button>
and:
$scope.setCode = function(code){
alert(code);
}
2) Declaring my variable as an object
<input type="text" ng-model="code.text">
<button ng-click="setCode()">Login</button>
and:
$scope.code = {text: 'foo'};
[...]
$scope.setCode = function(){
console.log($scope.code);
}
(I prefer the second one)
But I am a little confused about what I should do. It's ok to declare my ng-models like objects? I have to declare ALL my models like objects?
EDIT: Here is a Plnkr of the problem
In this example (I am using the Ionic framework), I declare a variable code with the value test, when I change the model in the input and press the Start button, in theory I have to see in an alert the new value of the model. But what I see is the old one.
Thanks!
Your first example is working, here is a plunkr.
If you hit the button without entering any text into the input field you get an alert undefined
. $scope.code
gets defined the moment you enter something to its bound field ng-model="code"
.
You could initialize it to a default in your controller too:
$scope.code = 'my default value';
I fixed your plnkr example using object model instead of primitive type.
$scope.model = {};
$scope.model.code = "test";
$scope.setCode = function(){
alert($scope.model.code);
}
See the plnkr.