Bind and scope ng-repeat json elements

Я сделал приложение для приема пищи, и я пытаюсь отправить результат, используя электронную почту mandrill. Я могу использовать форму ввода и отправлять электронные письма, однако я не могу привязывать и отображать отфильтрованные результаты json ng-repeat на основе выбора пользователя. Соответствующие HTML ниже:Bind and scope ng-repeat json elements

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

Так, в принципе, я хочу, чтобы связать $ scope.menu к item.name с item.type, item.name в item.flavors и item.name в item.sizes отдельно и $ scope.total to total (items.results) отдельно. Как только я привяжу эти значения, я хочу отправить их по электронной почте через 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": "[email protected]", //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": "[email protected]", //change from email here 
     "from_name": "Signs Restaurant", //change from name here 
     "to": [{ 
      "email": "[email protected]", //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 с этой страницы и отправить их по электронной почте, нажав кнопку «Разместить заказ». Заранее спасибо!

Вот plunker я работаю: http://plnkr.co/edit/4ByCDzXZfRU7kMX9oURT?p=preview JS все в index.html, EmailController начинается от линии 345. HTML в order.html

EDIT: Просто чтобы прояснить, моя проблема еще ниже, из-за того, что у меня есть функции 2 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 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>

Я добавил этот скрипт в мой контроллер Email:

$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; Что я делаю не так?

источник

2015-10-22 user3839044

Извините, в основном вы хотите получить отфильтрованный результат в своем контроллере? –

Точно, да. Есть идеи? – user3839044

Вы можете назначить свой отфильтрованный список новой модели области и использовать эту модель для отправки электронной почты.

Например, вы хотите получить отфильтрованный список 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 будет иметь отфильтрованный список.

источник

2015-10-22 05:31:37

Спасибо за ваш ответ, но я понял. Моя проблема еще ниже, в определении новой переменной. Позволь мне объяснить; когда я использую {{pricetotal = (total (items.results) | currency)}} и использую $ scope.pricetotal, я получаю общую цену, никаких проблем. Тем не менее, для других частей я не могу получить эти значения, поскольку они представляют собой значения, присутствующие в фильтрах 2 ng-repeat.Я объяснил свою проблему в своем EDIT (надеюсь, я лучше объяснил это время). Радуйся за свое время. – user3839044

ответ

Смежные вопросы