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

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

我已在编辑中添加。我检查了控制器代码。我从对象的数据库中收到数据。 – 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;

使用AngularJS的ng选项选择一个数组对象

相关推荐