角度传递下拉值而不是实际字符串到节点

时间:2015-04-03 19:19:30

标签: angularjs node.js

我有一个基于我创建的jSON对象填充的下拉列表。我试图将文本值“wineSupplier”传递给下拉列表中的文本选择,而是将POST中的数组值传递给节点。

因此,如果我的下拉列表有以下选项:

  • A
  • C
  • d

    我选择“C”2的值正在通过,我希望能够收到“C”

来自wines.ejs的代码片段:

            <form action="/createWine" method="POST">
                <p>Select the Wine Supplier:</p>
                <select name="wineSupplier" ng-model="supplierSelection" ng-options="supplier as supplier.supName for supplier in suppliers">
                </select>
                <label>Wine Name:</label>
                <input type="text" name="wineName" placeholder="Wine Name"/>
                <label>Wine Producer:</label>
                <input type="text" name="wineProducer" placeholder="Wine Producer"/>
                <label>Wine Colour:</label>
                <input type="text" name="wineColour" placeholder="Wine Colour"/>
                <label>Wine Type:</label>
                <input type="text" name="wineType" placeholder="Wine Type"/>
                <label>Wine Country:</label>
                <input type="text" name="wineCountry" placeholder="Wine Country"/>
                <p>
                    <button type="submit" class="btn">Submit</button>
                </p>
            </form>

来自app.js的代码修补程序

//Create a new wine objhect

app.post('/createWine', function(request, response) {
    //create and save a wine model
    var wine = new myWine({
        wineSupplier: request.body.wineSupplier,
        wineName: request.body.wineName,
        wineProducer: request.body.wineProducer,
        wineColour: request.body.wineColour,
        wineType: request.body.wineType,
        wineCountry: request.body.wineCountry
    });

    //save to model
    wine.save(function(err, model) {
        if (err) {
            response.send(504, 'There was an error');
        }
        else {
            response.redirect('/');
        }
    });
});

1 个答案:

答案 0 :(得分:2)

如果您希望<option><select>本身的实际值是模型中的值,则应使用track by

如果没有track by,AngularJS将提供<options>数值,用于跟踪哪些选择属于哪些数组项。

angular.module('app', [])
.controller('C', ['$scope', function ($scope) {
  $scope.suppliers = [{supName:'A'},{supName:'B'}, {supName:'C'}, {supName:'D'}];
}]);
                
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="app" ng-controller="C">
  <select name="wineSupplier" ng-model="supplierSelection" 
          ng-options="supplier.supName for supplier in suppliers track by supplier.supName">
  </select>
</div>

另一方面,看起来你有点滥用Angular,只是使用它来提供表单的一部分并使用普通的提交来提交值。理想情况下,所有控件都应绑定到模型中的字段,并且您应该使用AngularJS来执行对服务器的提交。如果您这样做,则无需使用track by