Select Component

This forum contains topics that were moved from Get Satisfaction
Mwesigwa Ezra
Posts: 0
Joined: Fri Mar 27, 2015 7:05 am

Select Component

Post by Mwesigwa Ezra »

How is a select Component Used. I have read various documentation on ng-options but i just can't put it to work.Someone please give me a simple tutorial for dummies on how to Use the select component in Appery platform (ionic). i have a form where i want Users to choose from a drop down list.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Select Component

Post by Evgene Karachevtsev »

Hello,

Here is the example
https://devcenter.appery.io/tutorials...

To be more specific, let's assume that your list for options is like that:
pre$scope.options = [
{
name: "Option1",
value: 1,
},
{
name: "Option2",
value: 2,
},
{
name: "Option3",
value: 3,
},
];/pre

Now when you drop your select component add ng-options and set it to:
preitem.name for item in options/pre

This means, that the options on dropdown open will be (Option1, Option2, Option3) and the your $scope.modelForSelect will get the value of particular option.

Zhivko Zhelev
Posts: 0
Joined: Tue May 31, 2016 6:59 am

Select Component

Post by Zhivko Zhelev »

Hello,
I did the same thing and it's working but when I start the app there is one additional empty row.

Image

My data is from Rest service (not DB) and in the response I have 4 lines. I display them with the same logic as you said - item.name for item in options. But I cannot find a way to get rid of this empty row. And when the app is installed on device is looks really ugly.

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Select Component

Post by Serhii Kulibaba »

Hello,

Please set a value of the variable $scope.modelForSelect = the first item of your database response, like:
pre$scope.modelForSelect = $scope.options[0].value;/pre

Zhivko Zhelev
Posts: 0
Joined: Tue May 31, 2016 6:59 am

Select Component

Post by Zhivko Zhelev »

There is something I don't understand. Why I have to hardcode this and where to set this?
my response is looking like this
for (var j = 0, k = success.data.length; j < k; j++) {

Code: Select all

         modelForSelectList_scope[j] = Apperyio.EntityAPI('modelForSelectList.[i]'); 
         modelForSelectList_scope[j].code = j; 
         modelForSelectList_scope[j].description = success.data[j].description; 
     } 

ng-option is "modelForSelect.description for modelForSelect in modelForSelectList"

leven.steve
Posts: 0
Joined: Sun Mar 04, 2012 4:01 pm

Select Component

Post by leven.steve »

Zhivko, it took me a long time to get my head around this and the Appery guys gave me the answer.

  1. Create a scope variable - say selectedModel

  2. Add selectedModelto your Select component using ng-model attribute

  3. Also add selectedModel using ng-selected attribute.

    Now when you set selectedModel to one of the options you use in the ng-options list, the select component will change/show that option.

    Likewise when you select a different option then selectedModel will be updated with your selection.

    Then in your success function you can set selectedModel to one of the scope entries and it will be reflected into your select list.

    I will dig out some code I wrote to enhance this and post it later. It will give you a "Please select a xxxxx" as the first option and also to set the select after reading from the database if you are editing rather than updating.

leven.steve
Posts: 0
Joined: Sun Mar 04, 2012 4:01 pm

Select Component

Post by leven.steve »

Model defines
employees Type:Array Employees of Type: employee
employee Type:Object _id String
displayName String
etc.

Page x Scope Variables
employeelist Type: employees
selectedEmployee Type: employee

Page x Scope Functions
code
$scope&#46;loadEmployeeList = function () {
&#47;&#47; i am using a REST service call but this could be Server Code instead
var requestData = {};
requestData&#46;params = Apperyio&#46;EntityAPI('xxx_Employees_list_service&#46;request&#46;query', undefined, true);
requestData&#46;params&#46;sort = "displayName&quot
requestData&#46;params&#46;limit = 1500;
requestData&#46;params&#46;where = "{'Enabled':true}&quot

Apperyio&#46;get("xxx_Employees_list_service")(requestData)&#46;then(
function(success) { &#47;&#47; success callback
(function mapping1182(success, $scope) {
var employeelist_scope = $scope&#46;employeelist;
employeelist_scope = [];
for (var i = 0, l = success&#46;data&#46;length; i <= l; i++) {
employeelist_scope = Apperyio&#46;EntityAPI('employees&#46;');
if (i === 0) {
employeelist_scope&#46;_id = "0&quot
employeelist_scope&#46;displayName = "Select Employee Name&quot
} else {
employeelist_scope = success&#46;data;
}
}
$scope&#46;employeelist = employeelist_scope;
if ($scope&#46;tsid == "0") {
&#47;&#47;0 means adding new item otherwise this is the _id of the object being edited
$scope&#46;selectedEmployee = employeelist_scope[0];
}
})(success, $scope);
},
function(error) { &#47;&#47; callback to handle request error
},
function(notify) { &#47;&#47; notify callback, can fire few times
});
/code

So that gets you a list of Employees with the first item being "Select Employee Name" or whatever string you want.

If we're adding a new item on this page/form then the $scope.selectedEmployee gets set to the first item in the list so the Select control will show "Select Employee Name"

If we are editing something existing then we know the employee name we have already saved so to set the Select component you can set $scope.selectedEmployee to that Employee. What I do is bit of an overkill but I scan the list and match the name I have and then use that matched item to set the scope variable, like this:

code
var list_scope = $scope&#46;employeelist;
for (var i = 0, j = list_scope&#46;length; i < j; i++) {
if (list_scope&#46;displayName == $scope&#46;selectedEmployee&#46;displayName) {
$scope&#46;selectedEmployee = list_scope;
break;
}
}
/code

See the attached pic for the Select component attributes

Note that I also have a changedEmployee() function that triggers when you change the selection and in there you can do other processing using the new selected Employee data from the $scope variable.

Hope that helps

Image

Zhivko Zhelev
Posts: 0
Joined: Tue May 31, 2016 6:59 am

Select Component

Post by Zhivko Zhelev »

Thanks for your answer. But I still don't get it. I tried the same thing and didn't helped.
In my response there are 4 elements. after success I checked $scope.approveReason and it was empty. I set $scope.approveReason = $scope.ApproveReasonList[0]; (like Sergiy said) and when I print it in the console there is the first value of the list.
Image

But still... when I look at the select component - there is one empty row in the beginning.

Image

here are some additional screens

Image

Image

leven.steve
Posts: 0
Joined: Sun Mar 04, 2012 4:01 pm

Select Component

Post by leven.steve »

Please describe or screenshot your scope variables you use

Zhivko Zhelev
Posts: 0
Joined: Tue May 31, 2016 6:59 am

Select Component

Post by Zhivko Zhelev »

it's in the image above
approveReasons

  • code
  • description
    and approveReasonsList - array of approveReasons
Post Reply