绑定和范围ng-repeat json元素

时间：2015-10-22 03:00:39

标签： json angularjs angularjs-scope ng-repeat angularjs-ng-model

我已经制作了一个食品外卖应用程序，我试图使用mandrill电子邮件发送结果。我能够使用输入表单并发送电子邮件，但是，我无法根据用户选择绑定和调整过滤的json ng-repeat结果。以下相关HTML：

<md-card>
<md-card-content>
<h3 class="md-subhead" align="center">Review And Submit Order</h3>
<md-divider></md-divider>
<md-list ng-repeat="item in items.results | filter:true">
  <md-list-item layout="row">
    <h3><div style="text-align: left;" ng-bind-html="item.name"></div><span style="float: left;">Qty:{{item.qty}}</span></h3>
    <span flex></span>
    <h3>{{ item.price | currency }}</h3>
  </md-list-item>
  <md-list-item layout="row">
    <span>Side: {{item.type}}</span>
  </md-list-item>
  <md-list-item layout="row" ng-repeat="item in item.flavors | filter:true">
    <span>{{ item.name }}</span>
    <span flex></span>
    <span>{{ item.price | currency }}</span>
  </md-list-item>
  <md-list-item layout="row" ng-repeat="item in item.sizes | filter:true">
    <span>{{ item.name }}</span>
    <span flex></span>
    <span>{{ item.price | currency }}</span>
  </md-list-item>
</md-list>
<md-divider></md-divider>
<md-list>
  <md-list-item layout="row">
    <h3 class="md-subhead">Order Total:</h3>
    <span flex></span>
    <h3 ng-model="pricetotal">{{ total(items.results) | currency }}</h3>
  </md-list-item>
</md-list>
</md-card-content>
</md-card>
 <md-card ng-if="(items.results | filter : {active: true}).length > 0">
 <md-card-content layout-padding>

<form name="order">
 <md-input-container flex>
  <label>Name</label>
  <input ng-model="name">
 </md-input-container>
 <md-input-container flex>
     <label>Phone</label>
  <input ng-model="phone">
 </md-input-container>
  <md-input-container flex>
    <label>Address</label>
    <input ng-model="address">
  </md-input-container>
  <md-input-container flex>
    <label>Email</label>
    <input ng-model="email">
  </md-input-container>
  <md-input-container flex>
    <label>Options</label>
    <textarea ng-model="options" 
              columns="1" 
              md-maxlength="150"></textarea>
  </md-input-container>
</form>

 </md-card-content>
 <md-card-content layout="row" layout-align="end center">
  <md-button class="md-raised md-primary" ng-controller="EmailController" ng-click=sendMail()>
    Place Order
</md-button>

</md-card-content>
</md-card>

所以，基本上，我想将item.name中的item.type，item.name，item.flavors中的item.name和item.sizes中的item.name分别绑定$ scope.name并将$ scope.total绑定到total（items。结果）分开。一旦我绑定了这些值，我希望通过Mandrill发送给他们发送电子邮件。

这是我的EmailController：

app.controller('EmailController', function($scope, $http, $mdToast, OrderFunctions) {

  $scope.showSuccessToast = function() {
    $mdToast.show({
      position: "top",
      template: "<md-toast style='background-color:#3F51B5;'>Your order has been sent. Thank you!</md-toast>"
    });
  };
  $scope.showErrorToast = function() {
    $mdToast.show({
      position: "top",
      template: "<md-toast style='background-color:#3F51B5;'>Order not sent. Please check your internet connection.</md-toast>"
    });
  };

  $scope.total = OrderFunctions.total;
  $scope.totalOrder = OrderFunctions.totalOrder;

  $scope.sendMail = function() {
    var mailJSON = {
      "key": "XXXXXXXXXXXX", //your mandrill key goes here
      "message": {
      "html": "<h1>New Order</h1><p>You have received a new order from:</p><p>Name: *|NAME|*<br>Phone: *|PHONE|*<br>Address: *|ADDRESS|*<br>Email: *|EMAIL|*<br>Options: *|OPTIONS|*</p><p>They would like:</p><p>*|ITEMS|*</p><p>Order Total is: *|TOTAL|*</p>",
        "merge_vars": [{
          "rcpt": "management@signsrestaurant.ca", //your email addy here
          "vars": [{
                        "name": "NAME",
                        "content": $scope.name
                    },{
                        "name": "PHONE",
                        "content": $scope.phone
                    },{
                        "name": "ADDRESS",
                        "content": $scope.address
                    },{
                        "name": "EMAIL",
                        "content": $scope.email
                    },{
                        "name": "OPTIONS",
                        "content": $scope.options
                    },{
                        "name": "ITEMS",
                        "content": $scope.menu
                    },{
                        "name": "TOTAL",
                        "content": "$"+$scope.total+".00"
          }]
        }],
        "text": "",
        "subject": "New Order Received", // change subject here
        "from_email": "management@signsrestaurant.ca", //change from email here
        "from_name": "Signs Restaurant", //change from name here
        "to": [{
          "email": "management@signsrestaurant.ca", //your email here
          "name": "New Order", //subject here
          "type": "to"
        }],
        "merge": true,
        "important": false,
        "track_opens": null,
        "track_clicks": null,
        "auto_text": null,
        "auto_html": null,
        "inline_css": null,
        "url_strip_qs": null,
        "preserve_recipients": null,
        "view_content_link": null,
        "tracking_domain": null,
        "signing_domain": null,
        "return_path_domain": null
      },
      "async": false,
      "ip_pool": "Main Pool"
    };
    var apiURL = "https://mandrillapp.com/api/1.0/messages/send.json";
    $http.post(apiURL, mailJSON).
    success(function(data, status, headers, config) {
      $scope.showSuccessToast();
      $scope.form = {}; //this clears the form after success
      console.log('successful email send.');
      console.log('status: ' + status);
      console.log('data: ' + data);
      console.log('headers: ' + headers);
      console.log('config: ' + config);
    }).error(function(data, status, headers, config) {
      $scope.showErrorToast();
      console.log('error sending email.');
      console.log('status: ' + status);
    });
    //use these to only clear certain fields  
    /*
    $scope.name = "";
    $scope.phone = "";
    $scope.address = "";
    $scope.email = "";
    $scope.clearCart();
    */
  };
});

我尝试过以下方法： 我改变了这个

    <md-list ng-repeat="item in items.results | filter:true">

到

    <md-list ng-repeat="item in (menu = items.results | filter:true)">

在这种情况下，我认为我必须定义$ scope.menu，但似乎太复杂，无法定义相同的内容。我很感激任何关于接近这一点的提示。我对angularjs很新，但已经设法找出大多数事情。我们的想法是从该页面获取过滤的ng-repeat json数据，并通过点击按钮“放置订单”通过电子邮件发送。提前谢谢！

这是我正在研究的一名傻瓜： http://plnkr.co/edit/4ByCDzXZfRU7kMX9oURT?p=preview JS都在index.html中，EmailController从第345行开始.HTML在order.html中

编辑：为了澄清，我的问题进一步缩小，因为我有一个低于另一个的2 ng重复功能。这是我试过的;我改变了HTML：

<md-card>
<md-card-content>
<h3 class="md-subhead" align="center">Review And Submit Order</h3>
<md-divider></md-divider>
<md-list ng-repeat="item in filteredmenu = (items.results | filter:true)">
  <md-list-item layout="row">
    <h3><div style="text-align: left;" ng-bind-html="item.name"></div><span style="float: left;">Qty:{{item.qty}}</span></h3>
    <span flex></span>
    <h3>{{ item.price | currency }}</h3>
  </md-list-item>
  <md-list-item layout="row">
    <span>Side: {{item.type}}</span>
  </md-list-item>
  <md-list-item layout="row" ng-repeat="item in filteredflavors = (item.flavors | filter:true)">
    <span>{{ item.name }}</span>
    <span flex></span>
    <span>{{ item.price | currency }}</span>
  </md-list-item>
  <md-list-item layout="row" ng-repeat="item in filteredsizes = (item.sizes | filter:true)">
    <span>{{ item.name }}</span>
    <span flex></span>
    <span>{{ item.price | currency }}</span>
  </md-list-item>
</md-list>
<md-divider></md-divider>
<md-list>
  <md-list-item layout="row">
    <h3 class="md-subhead">Order Total:</h3>
    <span flex></span>
    <h3 ng-model="pricetotal">{{ pricetotal=(total(items.results) | currency) }}</h3>
  </md-list-item>
</md-list>
</md-card-content>
</md-card>
 <md-card ng-if="(items.results | filter : {active: true}).length > 0">
 <md-card-content layout-padding>

<form name="order">
 <md-input-container flex>
  <label>Name</label>
  <input ng-model="name">
 </md-input-container>
 <md-input-container flex>
     <label>Phone</label>
  <input ng-model="phone">
 </md-input-container>
  <md-input-container flex>
    <label>Address</label>
    <input ng-model="address">
  </md-input-container>
  <md-input-container flex>
    <label>Email</label>
    <input ng-model="email">
  </md-input-container>
  <md-input-container flex>
    <label>Options</label>
    <textarea ng-model="options" 
              columns="1" 
              md-maxlength="150"></textarea>
  </md-input-container>
</form>

 </md-card-content>
 <md-card-content layout="row" layout-align="end center">
  <md-button class="md-raised md-primary" ng-controller="EmailController" ng-click=sendMail()>
    Place Order
</md-button>

</md-card-content>
</md-card>

我将此脚本添加到我的电子邮件控制器：

  $scope.filteredmenu = function (filteredmenu){
    var order = " ";
  angular.forEach(filteredmenu, function(item) {
    var flavor = " ";
    var size = " ";
    order += item.name + ", Qty: " + item.qty + " , ";
    angular.forEach(filteredflavors, function(option) {
      flavor += "Flavor: " + option.name + " , ";
    });
    angular.forEach(filteredsizes, function(option) {
      size += "Size: " + option.name + " , ";
    });
    menuorder += order + size + flavor;
  });
  return menuorder;
  };

我很容易得到$ scope.pricetotal的结果，但不是$ scope.filteredmenu;我做错了什么？

1 个答案:

答案 0 :(得分：0)

您可以将过滤后的列表分配到新的范围模型，并使用此模型发送电子邮件。

例如，您希望从以下代码中获取item.sizes的过滤列表，

<md-list-item layout="row" ng-repeat="item in item.sizes | filter:true">

只需将已过滤的item.size分配给这样的新模型，

<md-list-item layout="row" ng-repeat="item in (filteredSize = item.sizes | filter:true) ">

现在，您的新变量$scope.filteredSize将包含已过滤的列表。

相关问题
最新问题