Question

在这里坚持AngularJS新手...... 我正在开发一个在线食品订单系统。用户应该选择不同的菜肴。对于每种美食，都会显示许多默认菜单。对于每个菜单，提出了许多默认课程。用户应该可以选择更改此类默认课程，添加和/或删除其他课程等我被困的地方是为每个菜单创建默认课程。尝试使用过滤器，ng-if等，但似乎没有解决方案。例如，假设用户选择了意大利菜> Margherita菜单，我想列出3个课程：＆＃39; Pizza＆＃39;，＆＃39; Salad＆＃39;＆＃39; Softdrink＆＃39;每个都有其选项和附加功能。
课程＆＃39;要从$ scope.courses数组中获取的详细信息（包括所有可用的课程，包括价格详细信息，可用的额外内容等）。

查看已截断的代码here。 Html摘录：

<body ng-controller="MainCtrl">
<div>
<label>Type of Menu:</label>
  <select ng-model="selectedToM"
    ng-options="menu.ToM group by menu.ToC for menu in menus">
  </select><br>

<h3>Personalize Your Menu</h3>
<label>Course: </label>
  <select ng-model="SelectedCourse" 
    ng-options="course.Type for course in courses">
    <option value="">-- choose an option --</option>
  </select>

<div ng-repeat="Characteristic in SelectedCourse.Characteristics">
  {{Characteristic.Label}}:
  <select ng-model="SelectedCharacteristic" 
    ng-options="option.OptItem for option in Characteristic.Options">
  </select>
</div>

和app.js提取：

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.menus = [{
    ToC: 'American',
    ToM: 'McMenu',
    courses: []
  }, {
    ToC: 'American',
    ToM: 'Easy',
    courses: []
  }, {
    ToC: 'Italian',
    ToM: 'Margherita',
    courses: ['Pizza', 'Salad', 'Softdrink']
  }, {
    ToC: 'Chinese',
    ToM: 'McNoodle',
    courses: []
  }, ];

  $scope.courses = [{
      "Type": "Pasta",
      "Ppu": 4,
      "Characteristics": [{
        "Label": "Variant",
        "Options": [{
          "OptItem": "Lasagne",
          "addppu": 2
        }, {
          "OptItem": "Tortellini",
          "addppu": 1.5
        }, {
          "OptItem": "Gnocchi",
          "addppu": 1
        }, {
          "OptItem": "Spaghetti",
          "addppu": 0
        }, {
          "OptItem": "Cannelloni",
          "addppu": 2
        }],
      }, {
        "Label": "Size",
        "Options": [{
          "OptItem": "Normal",
          "addppu": 0
        }, {
          "OptItem": "King size",
          "addppu": 1
        }],
      }]
    }, {
      "Type": "Pizza",
      "Ppu": 4,
      "Characteristics": [{
        "Label": "Variant",
        "Options": [{
          "OptItem": "Margherita",
          "addppu": 0
        }, {
          "OptItem": "Napoli",
          "addppu": 1
        }, {
          "OptItem": "Funghi",
          "addppu": 1
        }, {
          "OptItem": "Prosciutto",
          "addppu": 0.5
        }, {
          "OptItem": "Hawaii",
          "addppu": 2
        }],
      }, {
        "Label": "Size",
        "Options": [{
          "OptItem": "Normal",
          "addppu": 0
        }, {
          "OptItem": "King size",
          "addppu": 1
        }],
      }]
    }, {
      "Type": "Salad",
      "Ppu": 2.5,
      "Characteristics": [{
        "Label": "Dressing",
        "Options": [{
          "OptItem": "None",
          "addppu": 0
        }, {
          "OptItem": "Italian",
          "addppu": 1
        }, {
          "OptItem": "French",
          "addppu": 1
        }],
      }, {
        "Label": "Size",
        "Options": [{
          "OptItem": "Small",
          "addppu": 0
        }, {
          "OptItem": "Medium",
          "addppu": 1
        }, {
          "OptItem": "Large",
          "addppu": 1.5
        }],
      }]
    }, {
      "Type": "Softdrink",
      "Ppu": 3,
      "Characteristics": [{
        "Label": "Type",
        "Options": [{
          "OptItem": "Coca-Cola",
          "addppu": 0
        }, {
          "OptItem": "Coca-Cola Light",
          "addppu": 0.5
        }, {
          "OptItem": "Fanta",
          "addppu": 0
        }, {
          "OptItem": "Sprite",
          "addppu": 0
        }],
      }]
    }


  ];


});

任何帮助将不胜感激！

Angular购物车 - 有条件地设置默认项目

0 个答案: