Use of AngularJS's ng-option select for an array of object

Question

I made an object reading data from database. My database table has the following format.

id   module_id   category    status    categoryImage    description
35       1       Machines     Active    machine.jpg      test

Currently only one row is there and my array of object (machineCategories) getting rows of those data from the database has only one object currently.

In my html, I have <select> </select> binded to that machineCategories. But now select doesn't display anything. My html code is

<select class="select form-control capitalize"
        ng-model="machineCat.id"
        ng-change="selctedType(machineCat.id)"
        ng-options="machineCat as machineCat.category for machineCat in machineCategories">
    <option value="" selected disabled>Choose Type </option>
</select>

selctedType in javascript file is

//To check selected type machine 
$scope.selctedType = function (type) {
    $scope.typeId = type.id;
    $scope.typeCategory = type.category;   
}

machineCategories has one row of data. But select in html is blank with certain length and its length is same as number of elements in the object as shown in the picture.

What could be the reason? Is it because of single object in the array? There could be only one object in the array or multiple objects.

在此处输入图片说明

EDIT

Controller code

var loadMachines = function () {
    var loadMachinesRequest = MachineResource.loadMachineCategoryList();
    loadMachinesRequest.success(function (loadMachinesRes) {
        $scope.machineCategories = loadMachinesRes.result;
        loadMachineSubType();
    });
    loadMachinesRequest.error(function (loadMachinesRes) {
        $scope.result = loadMachinesRes.result;
    });
}
loadMachines();

EDIT1: This is how I get data from database.

public function machineModule_get()//edited
    {
        //api to get category like machine/resort id 3 belong to main module (machine_andresorts)
        $machinesModule = [];
        $modules = $this->master_model->getRecords('module_category', array('module_id' => 1)); 
        foreach ($modules as $modulesRow) {
          if(strpos($modulesRow['category'], "Machines")!==false){
             $machinesModule = $modulesRow;
          }

        }

        if (!empty($machinesModule)) {     

            $responseArray = array(
                'result' => $machinesModule,
                'success' => true);
            return $this->set_response($responseArray, REST_Controller::HTTP_OK);
        } else {
            $responseArray = array(
                'result' => 'no data found in Module Category',
                'success' => false
            );
            return $this->set_response($responseArray, REST_Controller::HTTP_PARTIAL_CONTENT);
        }
    }

Answer 1

Here is the simple working example:

HTML

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedCar" 
    ng-change="selectedType(selectedCar.model)"
    ng-options="x as x.model for x in cars">
      <option value="" selected disabled>Choose Type </option>
    </select>

    <div>{{selectedCar}}</div>
  </div>  
</body>

Script

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.cars = [{
    model: "Ford Mustang",
    color: "red"
  }, {
    model: "Fiat 500",
    color: "white"
  }, {
    model: "Volvo XC90",
    color: "black"
  }];

  $scope.selectedType = function(type) {
    $scope.selectedCar = type;
  }

});

Plnkr: http://plnkr.co/edit/qL5epCXRcFnCGxYsqSwj?p=preview

You are passing machineCate.id as type in selctedType function and then again extracting id and category from it. So this

$scope.selctedType = function (type) {
    $scope.typeId = type.id;
    $scope.typeCategory = type.category;   
}

actually becomes this:

$scope.typeId = machineCate.id.id;
$scope.typeCategory = machineCate.id.category;

Use of AngularJS's ng-option select for an array of object

Question

1 answers

solution1
0 2017-04-15 17:04:38

Use of AngularJS's ng-option select for an array of object

Question

1 answers

solution1 0 2017-04-15 17:04:38

solution1
0 2017-04-15 17:04:38