使用AngularJS的ng選項選擇一個數組對象

我做了一個從數據庫讀取數據的對象。我的數據庫表格有以下格式。使用AngularJS的ng選項選擇一個數組對象

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

目前只有一行是存在的，我對象的數組（machineCategories）得到這些數據行從數據庫中只有一個對象目前。

在我的html中，我有綁定到該machineCategories的<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>

selctedType在JavaScript文件是

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

machineCategories有一行數據。但是，html中的選擇是空白的，具有一定的長度，其長度與對象中元素的數量相同，如圖所示。

可能是什麼原因？是否因爲數組中的單個對象？數組中只能有一個對象或多個對象。

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); 
     } 
    }

來源

2017-04-15 batuman

安置自己的控制器代碼。 –

我已在編輯中添加。我檢查了控制器代碼。我從對象的數據庫中收到數據。 – batuman

@AayushiJain我添加了控制器代碼和從數據庫獲取數據的代碼。 – batuman

下面是一個簡單的工作示例：

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;

來源

2017-04-15 17:04:38

使用AngularJS的ng選項選擇一個數組對象

回答

相關問題