Question

所以，我正在尝试为我的应用制作一个简单的产品订单表单。我在Ionic弹出窗口中有一个select元素，它显示产品名称和价格（这是数据库中的单独字段）。现在我需要传输第三条信息 - 用户选择INSERT查询的产品的id - 将订单存储到数据库中，但我似乎无法做到。有人能告诉我这里我做错了什么：

$scope.openPopup = function(id, name){
    $scope.data = {};

  // Custom popup
  var myPopup = $ionicPopup.show({
     template: 'Choose product: <select ng-model="data.selected">\n\
                                    <option ng-repeat="product in products" ng-value="product.id">{{product.name}} - Price: {{product.price}}€</option>\n\
                                    </select>',
     title: 'Order form',
     scope: $scope,     
     buttons: [
        { text: 'Cancel' }, {
           text: '<b>Save</b>',
           type: 'button-positive',
              onTap: function(e) {

                 if (!$scope.data.selected) {
                    //don't allow the user to close unless he enters model...
                    console.log("no data");
                       e.preventDefault();
                 } else {
                     console.log("Product: " + $scope.data.selected);
                    var selectedProduct = $scope.data.selected;
                    // INSERT query here
                     }, function (err) {
                        console.error(err);
                    });
                 }
              }
        }
     ]
  });
  myPopup.then(function(res) {
     console.log('Tapped!', res);
  });    
};

问题是，代码没有转到else-branch，因为没有设置$ scope.data.selected。但是不应该将ng-value绑定到SELECT元素的ng-model到OPTION元素id？我听说使用ng-options也是一个选项，但我不知道是否能在一个选项元素中显示多个值。

代码是从文件的早期部分获取产品，我不会在此处发布，因为它工作正常（产品名称出现在select元素中）。

Answer 1

代码看起来没问题，但看起来您没有为$scope.data.selected选择默认值。因此，如果执行onTap而用户未选择任何选项，则$scope.data.selected将为空。

此外，ID可以为0吗？如果是，那么if (!$scope.data.selected)分支将执行。

AngularJS - 从select中选择选项

1 个答案: