Question

我在使用ng-options的角度工作中有这个级联下拉列表，但注意到值是对象而不会传递给db。不知道是否必须像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>

帮助将不胜感激。感谢。

编辑2

---- ---- listing.js

var mongoose = require('mongoose');

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

Answer 1

不确定您发送到数据库的对象的问题是什么。但您可以从listing.manufacturer中删除模型数组。

请查看下面的演示或此fiddle。

＆＃13;

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.
    	$window.alert('send this data to your backend: ' + JSON.stringify(formData));
    };
}

＆＃13;

<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>

＆＃13;

更新06.09.2015

所以我创建了一个演示作为练习，并发现这些点可能是你的问题（这很难说，因为你没有发布除mongoose架构之外的任何后端代码）：

您的mongoose架构必须与您使用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">
```
在submit方法中创建新数据的副本，以避免删除表单模型数据。不是问题，而是上面代码中的错误。

您可以在bitbucket获取我的代码。克隆它，它应该可以帮助你开始使用猫鼬。

无法使用ng-options

1 个答案: