在带有 ng-repeat 的 md-select 中使用带有 ng-model 的范围来保存和显示 JSON 元素

Question

我在为 phonegap 开发的应用程序中遇到了两个错误，我希望你们中的一位可以帮助我。我正在构建一个包含 3 个不同部分的外卖应用程序：菜单、选项和订单。在“选项”页面中，我有多个复选框和一个使用 md-select 的下拉菜单。我想要做的是，当用户 select 从下拉列表中选择一个选项时，该选项将显示在订单页面中。我得到了它的工作，但是，我得到了一个额外的 "undefined" 文本，我不需要并且想要摆脱它。

这是我为此使用的相关脚本（plunker index.html 中的第 278-281 行）：

  $scope.selecteds = {};
  angular.forEach($scope.items, function(value) {
  $scope.selecteds = value;
  });

现在，$scope.items 已作为项目数组预加载。

    $scope.items = {
  "results": [{
    "active": false,
    "createdAt": "2015-10-05T20:19:58.264Z",
    "desc": "With arugula, smoked almonds \u0026 chipotle vinaigrette",
    "img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Watermelon-Quinoa-Jimaca-Salad.jpg",
    "name": "Watermelon Quinoa Jicama Salad (\u003cspan style=\"color: lightblue;\"\u003eVE\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e, \u003cspan style=\"color: yellow;\"\u003eDF\u003c/span\u003e)",
    "objectId": "x1zpkWmvmP",
    "price": 14,
    "flavors": [{
      "active": false,
      "name": "Vanilla",
      "price": 8
    }, {
      "active": false,
      "name": "Almond",
      "price": 8
    }, {
      "active": false,
      "name": "Hazelnut",
      "price": 8
    }, {
      "active": false,
      "name": "Caramel",
      "price": 8
    }],
    "sizes": [{
      "active": false,
      "name": "Small",
      "price": 0
    }, {
      "active": false,
      "name": "Medium",
      "price": 5
    }, {
      "active": false,
      "name": "Large",
      "price": 10
    }],
    "sides": [{
      "active": false,
      "name": "Soup"
    }, {
      "active": false,
      "name": "Salad"
    }, {
      "active": false,
      "name": "Fries"
    }],
    "updatedAt": "2015-10-09T17:20:50.527Z"
  }, {
    "active": false,
    "createdAt": "2015-10-05T20:35:01.363Z",
    "desc": "Buffalo mozzarella, tomato, marinated artichoke hearts, black olives, pesto \u0026 balsamic drizzle",
    "img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Mediterranean-Salad.jpg",
    "name": "Mediterranean Salad (\u003cspan style=\"color: lightgreen;\"\u003eV\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e)",
    "objectId": "nI5VSpdBUn",
    "price": 15,
    "flavors": [{
      "active": false,
      "name": "Chocolate",
      "price": 8
    }, {
      "active": false,
      "name": "Strawberry",
      "price": 8
    }, {
      "active": false,
      "name": "Mint",
      "price": 8
    }, {
      "active": false,
      "name": "Cherry",
      "price": 8
    }],
    "sizes": [{
      "active": false,
      "name": "Small",
      "price": 5
    }, {
      "active": false,
      "name": "Medium",
      "price": 10
    }, {
      "active": false,
      "name": "Large",
      "price": 15
    }],
    "sides": [{
      "active": false,
      "name": "Soup"
    }, {
      "active": false,
      "name": "Salad"
    }, {
      "active": false,
      "name": "Fries"
    }],
    "updatedAt": "2015-10-09T17:20:30.545Z"
  }]
};

我在选项页面中的相关HTML如下：

<md-list>
  <h2 class="md-title" style="color:#3F51B5;">Select Your Side</h2>
  <md-divider></md-divider>
  <md-list-item layout="row">
    <md-select aria-label="side set" class="md-accent" placeholder="Select a Side" ng-model="selecteds[name]">
      <md-option ng-value="item.name" ng-repeat="item in item.sides">{{ item.name }}</md-option>
    </md-select>
  </md-list-item>
</md-list>

我的HTML在订单页面如下：

  <md-list-item layout="row">
    <span>Side: {{selecteds}}</span>
  </md-list-item>

这里有一个 plunker 可以理解这一切。不过请注意，我的JS都混在了index.html（提前致歉）

http://plnkr.co/edit/4ByCDzXZfRU7kMX9oURT?p=preview

如您所见，当您按下紫色按钮选择一个项目并将 select 'Soup' 作为边时，它显示为边：{"undefined":"Soup"} 在订单页面，我只需要显示 Side: Soup。

另一个主要问题是当 2 个盘子 selected 时，select 面的离子是相互连接的，即如果你 select 第一面，第二面side 也是 selected，反之亦然。因此，如果您 select 'Soup' 用于第一项，则 Soup 也用于第二项 select。

提前致谢！

Answer 1

我已经弄清楚了，并已将其调整至完美。我创建了一个新的 JSON 数据，另外还为下拉列表添加了一个初始选项，以便自动选择第一个选项。我使用 item.type 作为元素。然后，我使用了以下脚本：

  $scope.type = {};
  angular.forEach($scope.items, function(value) {
    $scope.type = value;
  });

之后，我将HTML修改为如下：

<md-list>
  <h2 class="md-title" style="color:#3F51B5;">Select Your Side</h2>
  <md-divider></md-divider>
  <md-list-item layout="row">
    <md-select placeholder="Select a Side" ng-model="item.type">
      <md-option aria-label="side set" class="md-accent" ng-value="item.name" ng-repeat="item in item.sides">{{ item.name }}</md-option>
    </md-select>
  </md-list-item>
</md-list>

笨蛋：http://plnkr.co/edit/4ByCDzXZfRU7kMX9oURT?p=preview

在带有 ng-repeat 的 md-select 中使用带有 ng-model 的范围来保存和显示 JSON 元素

Using scope with ng-model in md-select with ng-repeat to save and display a JSON element

scope

angularjs

cordova

angularjs-ng-model