Ng-init in the selection for default value with AngularJS doesn't work

Question

In web app I have a list of Expenses, which that if you press above it takes you to a new page to edit the selected Expense. When the user click on an element of list, I save the Object (the selected Expense) in a Global Object common in whole application and I retrieve it when I am in the Editing controller:

$scope.companySelected = GlobalApplicationData.selectedExpenseList;

The GlobalApplicationData.selectedExpenseList is an Object:

$$hashKey: "object:39"
_id: "33aa5549-7802-40d9-bc89-8780705b8c9b"
_rev: "3-eb940cb990524112723f711618e0cf51"
ad_table_id: 1000596
company_name: "Company 1"
data: Object
recordid: 1000005
__proto__: Object

In one expense there is only one company. So, in this page of editing I have some field (input type text, date, etc). And I also have a selection with the list of the Companies of the logged user. To retrieve that list, I made this function:

$scope.getCompanyList = function() {
    EditExpenseListSrv.getCompanyListDetail(user).then(function (companyListDetail) {
        $scope.companyList = companyListDetail;
        $scope.$apply();
    }).catch(function (err) {
        console.log(err);
    });
};

CompanyListDetail is an array of Obejct:

companyListDetail: Array[5]
0: Object
1: Object
2: Object
3: Object
4: Object

And this is one example of those object:

_id: "44e620dc-e715-453f-882b-3f21aeef48fe"
_rev: "1-c09c9f3350e853e588f3358aaafc0374"
ad_table_id: 1000146
data: {
    description: "text"
    id_company: 513424
    name: "Company 2"
}
recordid: 1000002

So the company of the selected Expense ($scope.companySelected) will definitely part of the list obtained by the query ($scope.companyList). But I want to give the user the possibility to change it. So I would like to make a selection containing the list ($scope.companyList) and default already selected the Company corresponding to $scope.companySelected.

I've writter this, but it doesnt work:

<select class="selection" ng-model="companySelected"
                          ng-init="companySelected = globalApplicationData.selectedExpenseList" 
                          ng-options="company 
                          as company.data.name for company in companyList">

But it doesn't work. I can see in the selection all the Companies, but don't select the default value

you need to assign that value in the controller instead of doing it in ng-init. — Shashank
– Shashank, Commented Jun 14, 2016 at 8:07
But I did writing $scope.companySelected = GlobalApplicationData.selectedExpenseList; — panagulis72
– panagulis72, Commented Jun 14, 2016 at 8:09

Shashank · Accepted Answer · 2016-06-14 08:32:50Z

1

When you are assigning a default value to the select, you need to assign the object, so it won't work, when assigned with the same data of some other object:

Note:

a) data is the array which is getting looped in the select list

b) selectedcountry is the model which is bind on select list.

Option 1:

Using ng-init:

<select ng-model="selectedcountry" ng-init="selectedcountry = data[0]" ng-options="item.name for item in data">
    <option value="">Select</option>
</select>

Demo 1.

Option 2:

Assigning the default from the controller

$scope.selectedcountry = $scope.data[0];

Demo 2

answered Jun 14, 2016 at 8:32

Shashank

2,1002 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

miquelarranz · Accepted Answer · 2016-06-14 08:28:48Z

0

You can try to do the initialisation in the controller:

$scope.companySelected = "the value that you want to set here"

Or you can try to put the ng-init inside the parent of the select. Once I had a problem like this and I solved it putting the ng-init in the parent tag. Example:

<div id="parent" ng-init="companySelected = globalApplicationData.selectedExpenseList">
    <select ...>
</div>

Another idea would be to put companySelected inside an object. I have had some problems (I am not sure why) with the forms if I was using $scope.value inside the ng-value instead of using $scope.formData.value

answered Jun 14, 2016 at 8:28

miquelarranz

90411 silver badges27 bronze badges

Collectives™ on Stack Overflow

Ng-init in the selection for default value with AngularJS doesn't work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related