Dynamically set select options using AngularJS

Question

I'm trying to dynamically set the options of a select list and am stuck on what I need to put in the ng-options parameter to make it work as I want it to.

Here is the JSON

{ 
   "131":"Activity A",
   "141":"Activity B",
   "143":"Activity C",
   "186":"Activity D",
   "187":"Activity E",
}

My select list is...

 <select size="7" ng-model="selectedItems" ng-options="item.id as item.name for item in rlist">

My app.js is...

    angular.module('qAssign', []).controller('qCtrl', function ($scope, $http) {
        $scope.selectedItems = null;
        $scope.rlist = [];

        $http({
            method: 'GET',
            url: 'pathtoJSON.php',
            data: { applicationId: 1 }
        }).success(function (result) {
            $scope.rlist = result;
        });

    });

What gets rendered is

<option value="">undefined</option>
<option value="">undefined</option>
<option value="">undefined</option>
<option value="">undefined</option>
<option value="">undefined</option>

But what I'd like is

<option value="131">Activity A</option>
<option value="141">Activity B</option>
<option value="143">Activity C</option>
<option value="186">Activity D</option>
<option value="187">Activity E</option>

I know my ng-options is incorrect, I just don't know what it should be.

Thanks.

ngLover · Accepted Answer · 2015-07-28 13:58:16Z

1

You are taking options in wrong way .take it as .

 angular.module('qAssign', []).controller('qCtrl', function ($scope, $http) {
        $scope.selectedItems = null;
        $scope.rlist = [];

        $http({
            method: 'GET',
            url: 'pathtoJSON.php',
            data: { applicationId: 1 }
        }).success(function (result) {
            $scope.rlist = result;
             $scope.selectedItems = result.131;
        });

    });

answered Jul 28, 2015 at 13:58

ngLover

4,6183 gold badges23 silver badges42 bronze badges

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

Comments

Coder John · Accepted Answer · 2015-07-28 14:21:43Z

0

Yes sure you can do this on your server side:

$arr_temp = array (131 => Activity A, 132 => Activity B);
$arr_json = array();

foreach ($arr_temp as $key => $val) {
 $arr_json[] = array('id' => $key, 'name' => $val);
}  

return json_encode($arr_json);

answered Jul 28, 2015 at 14:21

Coder John

7864 silver badges7 bronze badges

Comments

Coder John · Accepted Answer · 2015-07-28 14:01:31Z

0

It should array of objects

     [
      { id:"131", name:"Activity A"},
      { id:"132", name:"Activity B"},
      { id:"133", name:"Activity A"}
     ]

answered Jul 28, 2015 at 14:01

Coder John

7864 silver badges7 bronze badges

2 Comments

Rob Over a year ago

I think you're absolutely right, is there any easy way of changing how this type of object list is created. At the moment the JSON is being created via json_encode in PHP. It's taking an array (131 => Activity A, 132 => Activity B) etc. Is there a way of adding the 'id' and 'name' parts?

Coder John Over a year ago

Mr @Rob please find remaining answer below. Hope that helps :)

ssuperczynski · Accepted Answer · 2015-07-28 14:01:45Z

0

Try to use angular.copy

$http.get('pathtoJSON.php', {applicationId: 1})
    .success(function (result) {
        angular.copy(result, $scope.rlist);
    });

answered Jul 28, 2015 at 14:01

ssuperczynski

3,4463 gold badges46 silver badges64 bronze badges

Collectives™ on Stack Overflow

Dynamically set select options using AngularJS

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related