對對象數組使用AngularJS的ng-option select

Question

我做了一個對象，從數據庫中讀取數據。 我的數據庫表具有以下格式。

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

目前只有一行，而我從數據庫中獲取這些數據行的對象數組（machineCategories）當前只有一個對象。

在我的html中，我將<select> </select>綁定到了該machineCategories。 但是現在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是空白的，具有一定的長度，其長度與對象中元素的數量相同，如圖所示。

可能是什么原因？ 是因為數組中有單個對象嗎？ 數組中可能只有一個對象，也可能有多個對象。

在此處輸入圖片說明

編輯

控制器代碼

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 select

問題描述

1 個解決方案

解決方案1
0 2017-04-15 17:04:38

對對象數組使用AngularJS的ng-option select

問題描述

1 個解決方案

解決方案1 0 2017-04-15 17:04:38

解決方案1
0 2017-04-15 17:04:38