How to work with ng-options in this code am working on ?

[Manish Jain]

Hello,

 I am trying to build the front end of my order management app and a table with my orders is the core of it. While its been smooth so far but I am finding it difficult to convert one column into a drop down . I tried a couple of solutions I found but that does not seem working. Here's the link to my app  - https://codepen.io/manishbjain/pen/pZoMMY . I have commented before and after the code where I am struck. 

[Zlatko Đurić]

Hi Manish,

A simple <select ng-model="todo.department" ng-options="department for department in todo.department" /> will work in this example.

[Manish Jain]

I tried this. It is working but only partially. I dont see any value after I've selected one value from that drop down. And when I click again to change , it shows just one value that too letters arranged vertically instead of horizontal. I know this sounds confusing . Can you please check the link again and help me find the problem. 

[Zlatko Đurić]

Oh, I believe I know where the issue is. Without looking the code again, the issue is that you're storing the selected value back to the property where the array itself should be. So two options:

1. if all of your todos will have the same departments available for that dropdown, then just store them on the scope, not on the individual todo - and then store just the actual value on a todo. Like, $scope.departments = ['One', 'Or the other']; $scope.todos = [ { name: 'Do it', department: null, done: false }, name: 'Do not', department: 'whatever was selected', done: true }];. And on your markup just pickup options from the scope instead from the individual todo.

2. If you have the departments per todo, store the selected one in a separate property. Or better, with your naming, store the selected one in todo.department, and store the "available departments" under todo.availableDepartments, then take your options from that instead.

Let me know if you don't understand what I've just written :) Also, try one of the two things. Better yet, try both so that in the future you'll know right away ;)

[Manish Jain]

Thanks Zlatko , 

                It worked . I tried both options and they both worked. I would wanna go with the first one , so that I dun have to repeat the departments again and again as it will 

remain the same in all the todos. Next, I feel the code I am working on is not Angular 4, I feel its in Angular JS. I just forked the code from one of the pens. I wanna change it to the

latest stable version of Angular since it would be too late later on when the app grows a bit. Can you suggest me what changes I need to make in the code so that its compatible to the

latest angular version ?

[Sander Elias]

Hi Manisch,

I'm sorry to break it to you, but all of it. You are right, better do it now before you are too deep into the project.

Here is a link to a stackblitz, that is running at Angular version 6. It's using all the latest stuff, and is already utilizing the CLI. If you have grown your project you can download it and develop it locally by using the same tools.

Regards

Sander

 

[Manish Jain]

Thanks Sander . Let me check that and work on the upgrade.