Question

我创建了一个从数据库中读取数据的对象。我的数据库表格式如下。

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

目前只有一行，我的数据对象（machineCategories）从数据库中获取这些数据的行当前只有一个对象。

在我的html中，我有<select> </select>绑定到该机器类别。但现在选择不显示任何内容。我的HTML代码是

<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>

javascript文件中的selctedType是

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

machineCategories有一行数据。但是html中的select是空白的，具有一定的长度，其长度与对象中元素的数量相同，如图所示。

可能是什么原因？是因为数组中的单个对象吗？数组中只能有一个对象或多个对象。

enter image description here

修改

控制器代码

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：这是我从数据库获取数据的方式。

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

以下是一个简单的工作示例：

<强> 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>

<强>脚本

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

您正在machineCate.id函数中传递selctedType，然后再次从中提取id和category。所以这个

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

实际上变成了这个：

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

使用AngularJS的ng-option选择对象数组

1 个答案: