How to fill a select dynamically, AngularJS?

Question

How to fill a select dynamically, AngularJS?

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I am filling out a selection of the departments of a company in the following way:

$scope.selectize_a_data = {
                        options: [
                            {
                                id: 1,
                                title: 'Informatica',
                                value: 1,
                                parent_id: 1
                            },
                            {
                                id: 2,
                                title: 'Contabilidad',
                                value: 2,
                                parent_id: 2
                             }
                        ]
                };

options.title what it contains will be what the select will show. But I must do this dynamically, that is, in title I must add a text that comes from a WebService / departments.

I'm doing it in the following way, but I do not know how to insert an object into the options array or what another solution might give it since the structure of the object must be like the previous one.

$http.get('http://localhost:808/sistemaerp/public/ws/departamentos').success(function(datas)
        {

            angular.forEach(datas.records, function(objeto)
            {
                console.log(objeto);
                $scope.options.push(objeto);
            });


            $scope.selectize_a_data = {
                        options: []
                };
        });

Let's say it looks like this:

$scope.selectize_a_data = {
                        options: [
                            {
                                id: objeto.id,
                                title: objeto.departamento,
                                value: 1,
                                parent_id: 1
                            }
                        ]
                };

Since for each object that the WebService finds, it must be adding values that it contains to the options []

The html I have it this way:

<div class="parsley-row">                                      
   <input type="text" config="ConfiguracionesSelect" options="selectize_a_data.options" ng-model="item.estado" name="selectize_a" selectize />                                        
</div>

Solved:

$scope.ObjDepartamento = {};
        $scope.departamentos = [];

        $http.get('http://localhost:808/sistemaerp/public/ws/departamentos').success(function(datas)
        {

            angular.forEach(datas.records, function(value, key)
            {   
                $scope.departamentos.push({
                    id:         value.id,
                    title:      value.departamento,
                    value:      value.id,
                    parent_id:  value.id 
                });                  
            });
        });

        $scope.ObjDepartamento['departamentos'] = $scope.departamentos;

HTML

<input type="text" config="confDepartamentos" options="ObjDepartamento.departamentos" ng-model="item.iddepartamento" selectize />

array object angularjs

asked by JG_GJ 23.03.2017 в 06:44

source

2 answers

1

Only concatenate the results returned by the service to the array of options in $scope :

$scope.selectize_a_data = { options: [] }

$http.get('http://localhost:808/sistemaerp/public/ws/departamentos').success(function(datas) {
  let departments = $scope.selectize_a_data.options;
  departments = departments.concat(datas);
  $scope.selectize_a_data.options = departments;
});

By changing options the changes are reflected in the HTML:

<select ng-options="department.value as department.title for department in selectize_a_data.options">
  <option value="" selected>Select Department</option>
</select>

answered by 23.03.2017 в 07:06

Go through a JSON array and display certain PHP data Put html elements one below the other

score 2 · Accepted Answer

Have you tried it in the following way?

$http.get('http://localhost:808/sistemaerp/public/ws/departamentos').success(function(datas)
        {

            angular.forEach(datas.records, function(value, key)
            {
                console.log(value.id);
                $scope.selectize_a_data.options.push({ 
                    id: value.id,
                    title: value.departamento,
                    value: 1,
                    parent_id: 1
                  });
            });


            $scope.selectize_a_data = {
                        options: []
                };
        });