angularjs ng-model(s) $scope

Question

I'm quite new in AngularJs, I just started to learn this World today. I think I got the point, but I do not understand the next problem.

I have a site which contains a lot of select input fields. I will explain my problem with two select fields

********** THE HTML FILE *************

enter code here

            <div id="FormContainer" ng-app="PermissionsApp">
                <div class="permission_container" ng-controller="PermsCtrl">
                    <select id="select_all" ng-model="select_all_var" ng-change="UpdateAll()">          
                        <option value="" ng-hide="true">-</option>
                        <option value="0">-</option>
                        <option value="n">no</option>
                        <option value="a" ng-selected="true">all</option>
                        <option value="g">group</option>
                        <option value="o">own</option>
                    </select>   
                    <select id="select_1_1" ng-model="select_1_1_var" ng-change="Update(1, 1)">
                            <option value="" ng-hide="true">--</option>
                            <option value="n">no</option>
                            <option value="a" ng-selected="true">all</option>
                            <option value="g">group</option>
                            <option value="o">own</option>
                    </select>   
                </div>
            </div>

************** THE JS FILE **************

enter code here

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

permissionsApp.controller("PermsCtrl",['$scope', function($scope) {
    $scope.UpdateAll = function () {
        console.log($scope.select_all_var + " - " + $scope.select_1_1_var);
    }
    $scope.Update = function (modul_id, action_id) {
        console.log($scope.select_all_var + " - " + $scope.select_1_1_var);
    }
}]);

OK ...

FIRST ISSUE

IF I change FIRST the select_all field after page reload, I get the next on the console: g - undefined

After that I change the select_1_1 field, I get the next on the console: g - g

SECOND ISSUE

If I change FIRST the select_1_1 fieldl after page reload I get the next on the console: undefined - g

After that I change the select_all field, I get the next on the console: g - g

SO ... it seems for me the variables can be seen in the $scope just after the change event .... do I need to declare the variables first time, or what's the problem? But I there are about 200 select fields on the page ... I do not want to declare them one by one.

Thanks for your answers in advance! FF

This appears to be expected behavior. The variables are `undefined` until you actually pick an option from the dropdown. If you want them to have a value before the user picks a value, then yes, you will have to set them yourself on page setup. — Claies, Jan 04 '17 at 20:17
My question to you is, what did you *want to have happen* when you pick from one dropdown and haven't yet picked from the other? — Claies, Jan 04 '17 at 20:20
I made you a plunkr to help others help you solve this - https://plnkr.co/edit/56hG6P9go6pOOLbL3wRl?p=preview — jusopi, Jan 04 '17 at 20:22
To Claies: Well ... I need to compere this variables with each other, because every select action will affect to other select fields. Imagine a table ... every cells contain a select field. If the selected values are same at every select field within a coloumn (or row) then the main select field at the top of the coloumn will get set the same selected value. — Fferlen, Jan 04 '17 at 20:34
you aren't showing a comparison here in this example, you are just showing trying to make an output. If you *were* making a comparison, then comparing `a` with `undefined` would be `false`, so the fact that these are undefined until they are selected shouldn't be a factor. It seems like you are concerned about a non-issue. I know that you accepted an answer that shows how to set default values, but from what you are describing, it shouldn't be necessary. — Claies, Jan 04 '17 at 20:56
in fact, using `ng-init` is not even recommended: https://docs.angularjs.org/api/ng/directive/ngInit#!/. ***This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of `ngInit`, such as for aliasing special properties of `ngRepeat`...*** — Claies, Jan 04 '17 at 20:59

score 0 · Accepted Answer · edited May 23 '17 at 11:53

So there are 2 ways to fix this:

ng-init

You can initialize your model to the desired value using:

<select ng-model="select_1_1_var" 
        ng-init="select_1_1_var = 'a'">

I don't use ng-selected much so I'm not familiar with its inner workings, but I would make an educated guess that this works solely on the UI and that it argues with other directives regarding initializing model values.

example - https://plnkr.co/edit/eO60jeXIKlDhAFuopnUc?p=preview

ng-options

So there has been a lacking feature (in my opinion) that you couldn't initialize a select control with a pre-existing model value when declaring your option elements. This is especially problematic when trying to use ng-repeat. It is recommended that you use ng-options and set your options via the controller as well as initialize your model values there:

<select id="select_all" 
        ng-model="select_all_var" 
        ng-options="opt.value as opt.name for opt in opts"
        ng-change="UpdateAll()">
</select>

example - https://plnkr.co/edit/M4qZEL4Y8EfRtabfSN8a?p=preview

bonus

If you want to display an empty option without muddying up your options array, please visit my answer here - Why does AngularJS include an empty option in select?

It's great, working properly, Thank you! The bonus as well! I chose the first way. — Fferlen, Jan 04 '17 at 20:54

angularjs ng-model(s) $scope

1 Answers1

ng-init

ng-options

bonus