オブジェクトの配列にAngularJSのng-optionを使用する

データベースからデータを読み取るオブジェクトを作成しました。私のデータベーステーブルのフォーマットは次のとおりです。オブジェクトの配列にAngularJSのng-optionを使用する

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

現在唯一の行があると、データベースからそれらのデータの行を取得するオブジェクトの私の配列（machineCategories）は、現在、1つのオブジェクトのみを有しています。

私のHTMLには、<select> </select>がそのマシンにバインドされています。しかし、選択すると何も表示されません。私のHTMLコードが

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

machineCategoriesあるジャバスクリプトファイルに

<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は、データの一つの行を有しています。しかし、htmlでの選択は一定の長さの空白で、長さは図のようにオブジェクトの要素数と同じです。

何故その理由が考えられますか？配列内の単一のオブジェクトのためですか？配列内に1つのオブジェクトしか存在できないか、複数のオブジェクトが存在する可能性があります。

enter image description here

EDIT

コントローラー・コード

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

あなたはselctedType機能タイプとしてmachineCate.idを渡し、その後、再びそれから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-optionを使用する

答えて

関連する問題