AngularJS model of select returns undefined


#1

The code from this jsfiddle does not work inside a view/controller based on this starter project. If I put that markup inside index.html, it works as expected.

Please see more details on this stack overflow thread.


#2

I have the same problem with text input.
to make it’s update I have to tap on some other input then re-submit again

<input type="text" ng-model="remark" placeholder="Comment...">

It’s should update to $scope.remark but when I using console.log($scope.remark); but return undefined.
Here codepen

I’m new to ionic and angular. not sure if I understand something wrong :frowning:

Update:
Works fine now using parameter. @isaacalves Please have a look on my solution
Here Codepen


#3
  1. init your model variable in your controller “$scope.remark = ‘’”
  2. Be sure if you have complex forms you need an object to store form values like
    $scope.form = {}

and your model for your text input: ng-model="form.remark"
angular will create a new key in $scope.form -> $scope.form.remark with the databinding to your inputfield…


Simple question :)
#4

Yes, to pass the value in a parameter solves the problem.

However, in some circumstances I don’t need to pass the value, and if I understood correctly, it should be accessible directly via scope.

I’m missing something here and I’d like to understand why AngularJS works like that.

I create a plunkr here:

The first select is wrapped on a div with its own controller “MyCtrl”, and it works as expected, as I’m able to retrieve the model from the ng-change event handler function.

The second select “belongs” to controller “DashCtrl”, the whole Dash tab view controller. When I try to retrieve the model from the ng-change event handler function it returns me undefined.

Why is that?


#5

And another time:
The controller recognizes that there are more than one formfields (2 select boxes) in your scope…

Your MyController recognizes only the first select-box.

Create an empty object in your app controller like $scope.locations = {}
In your template use: ng-model=“locations.selected” and in your alert use $scope.locations.selected … it works very well.

Or reuse your $scope.locais -> ng-model=“locais.selected” now on your $scope.locais.selected is the selected one

And thanks for not reading my previous post :wink:

Greets.

EDIT: http://plnkr.co/edit/YoN8peypEvZv9VxSuq0r?p=preview


#6

Thanks bengtler, I had actually read your first post but I couldn’t see a reason to wrap the variable inside an object, it made no sense to me that doing that would make it work and I thought you had misunderstood my post (I know I’m not clear sometimes because I’m no native english speaker).

In fact, you were right! I did just what you said and it worked, though I still don’t understand why it only works with the empty object , when that could be simpler with just a variable. Does it have something to do with the fact that the controller can recognize more than one select box? Sorry if I’m missing some basic concepts there, I’m very new to Angular.

Thanks a lot.

update

By the way, I’m more inclined to use a list instead of html select (mainly for styling purposes), in Ionic mobile apps. Here’s an example. What do you think?


#7

Hey,

angularjs search for possible form fields in the DOM of the current controller scope.

If there is only one formfield you can set the model to a variable.
If there are more possible formfields it builds up a form-object -> so you need to use an object to store the values.

With your list. It is fullfil your requirements of look & feel and usability use what you want.

Keep in mind, if you user select boxes, each device will use the system select box styling automatically.

But I do not like lists in modals (if you have long lists you have to scroll like hell) ;).

Have fun with you app and ionic .