不能提交Angularjs級聯下拉值ng選項

Question

我有這個級聯下拉角度與ng-options工作，但注意到這些值是對象，不會通過數據庫。不知道值是否必須像ng-repeat一樣明確設置。

select#manufacturer.form-control(name="manufacturer", ng-model="listing.manufacturer", ng-options="c.make for c in carData") 
    option(value="") Choose manufacturer 

select#model.form-control(name="model", ng-model="listing.model", ng-disabled="!listing.manufacturer", ng-options="d.model for d in listing.manufacturer.models") 
    option(value="") Choose model 

數據

$scope.carData = [ 
     {make: "Audi", models: [{ model: 'A1' }, { model: 'A2'}] }, {make: "BMW", models: [{ model: '316i' }, { model: '318i'}] }]; 

控制檯視圖

<option value="object:3" label="Audi">Audi</option> 
<option value="object:4" label="BMW">BMW</option> 

幫助將不勝感激。謝謝。

EDIT 2

---- ---- listing.js

var mongoose = require('mongoose'); 

module.exports = mongoose.model('Listing', new mongoose.Schema({ 
    manufacturer: String, 
    model: String 
})); 

Answer 1

不是真的知道什麼是與你發送到數據庫對象的問題。 但是，您可能可以從listing.manufacturer中刪除模型數組。

請看下面的演示或在這fiddle。

angular.module('demoApp', []) 
 
    .controller('mainController', MainController); 
 

 
function MainController($scope, $window) { 
 
    $scope.carData = [{ 
 
     make: "Audi", 
 
     models: [{ 
 
      model: 'A1' 
 
     }, { 
 
      model: 'A2' 
 
     }] 
 
    }, { 
 
     make: "BMW", 
 
     models: [{ 
 
      model: '316i' 
 
     }, { 
 
      model: '318i' 
 
     }] 
 
    }]; 
 
    
 
    $scope.submit = function(formData) { 
 
     delete formData.manufacturer.models; // remove not needed prop. 
 
    \t $window.alert('send this data to your backend: ' + JSON.stringify(formData)); 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController"> 
 
    <form ng-submit="submit(listing)"> 
 
    <select id="manufacturer" name="manufacturer" ng-model="listing.manufacturer" ng-options="c.make for c in carData" class="form-control"> 
 
     <option value="">Choose manufacturer</option> 
 
    </select> 
 
    <select id="model" name="model" ng-model="listing.model" ng-disabled="!listing.manufacturer" ng-options="d.model for d in listing.manufacturer.models" class="form-control"> 
 
     <option value="">Choose model</option> 
 
    </select> 
 
     <button type="submit">submit</button> 
 
    </form> 
 
</div>

更新2015年6月9日

所以我創建了一個演示作爲一個練習，發現這個地方，可能是你的問題（這是很難說，因爲你還沒有發佈除貓鼬架構以外的任何後端代碼）：

• 你的mong oose模式必須與您傳遞的數據與ajax匹配。所以，你的模型模式應該是這樣的（要求是可選的，可以被刪除）：

  new Schema({ 
      manufacturer: { 
       make: { 
        type: String, 
        required: true 
       } 
      }, 
      model: { 
       type: String, 
       required: true, 
      } 
  }); 
  

• 同時添加as d.model到模型下拉列表刪除嵌套的對象，然後第二個下拉標記是這樣的（你可以測試我們用一個打開的瀏覽器控制檯和後端檢查在響應中的誤差時的as d.model）：

  <select id="model" name="model" 
      ng-model="listing.model" ng-disabled="!listing.manufacturer" 
      ng-options="d.model as d.model for d in listing.manufacturer.models" class="form-control"> 
  

• 在提交方法創建新的數據的副本，以避免表單模型的數據刪除。不是真正的問題，而是上面我的代碼中的一個錯誤。

你可以在我的代碼bitbucket。克隆它，它應該可以幫助你開始使用貓鼬。