如何将项目添加到受列表影响的下拉列表答案

【问题标题】：How to add an item to drop-down affected by list如何将项目添加到受列表影响的下拉列表
【发布时间】：2017-02-15 15:30:25
【问题描述】：

我有级联下拉和列表。我正在尝试将新输入添加为对象 {'name':'pizzaName','sizes':['availableSizes']} 以便将其添加到现有列表中，用户使用该列表来选择披萨及其可用尺寸。面临的问题是复选框的选择，因为它将它们一起检查并且不会更新到列表中。当单击添加按钮时，下拉菜单和复选框都会分配一些值，并在下拉菜单和复选框中显示一个空白区域。

plnkr

HTML：

 Enter the new Pizza Name:
    <input type="text" ng-model="newName">
    Select size availabel:
    <ul>
      <li>Small</li>
      <label>
        <input type="checkbox" ng-model="selected_input.checked">
      </label>

      <li>Medium</li>
      <label>
        <input type="checkbox" ng-model="selected_input.checked">
      </label>
    </ul>
    <button ng-click="add()">Add</button><br>
    <br>

【问题讨论】：

解决方案解决了您的问题吗？
@LironIlayev 实际上它没有被添加到客户列表中。所以想弄清楚。你能在plnkr中发布工作代码吗？
我不确定更改是否出现在您的屏幕上，所以如果他们没有输入此链接：plnkr.co/edit/T6IoQFc6AfLIFSAVHhGV?p=info
@LironIlayev 我刚才在 plnkr 检查了代码。当输入给出时，它会显示比萨饼的名称，但比萨饼的大小未列出。
我很累编辑它，但没有任何效果。你能帮我解决这个@LironIlayev

标签： angularjs checkbox ionic-framework

【解决方案1】：

您的项目有一些问题。

您加载了 ng-controller 两次。转到您的 body 标签并删除 ng-controller 属性。
您的 add 函数完全搞砸了，我将其更改为现在可以使用的功能，如果您在 cmets 中有具体问题，我不会解释每一行代码。
您的复选框具有相同的 ng-model，这就是它们同时选中和取消选中的原因。

新控制器

$scope.newName = "";

$scope.pizzaOrder;

 $scope.customerList=[
 {name: 'mushroom', types: ['Small', 'Medium']}];

 $scope.selected_input = {small: true, medium: false};

 $scope.add = function() {
    var typesToPush = [];
    if($scope.selected_input.small)
        typesToPush.push('small');
    if($scope.selected_input.medium)
        typesToPush.push('medium');
    $scope.customerList.push({name: $scope.newName, types: typesToPush});
    console.log("Updated customerList: ");
    console.log($scope.customerList);
  };

按 F12 并查看控制台以查看 customerList 已相应更新。

新 index.html

<body>
    <ion-view view-title="Welcome">
  <ion-content ng-controller="pizzaShop">
    <h3> Welcome </h3>
    {{sample}}
    Enter the new Pizza Name:
    <input type="text" ng-model="newName">
    Select size availabel:
    <ul>
      <li>Small</li>
      <label>
        <input type="checkbox" ng-model="selected_input.small">
      </label>

      <li>Medium</li>
      <label>
        <input type="checkbox" ng-model="selected_input.medium">
      </label>
    </ul>
    <button ng-click="add()">Add</button><br>
    <br>
    Make:

      <select ng-model="pizzaOrder" ng-options="order.name for order in customerList"></select><br>
     Type:
    <ion-checkbox ng-model="cartype" ng-repeat="sizeType in pizzaOrder.types" ng-disabled="!pizzaOrder">
    <span>{{sizeType}}</span>
    </ion-checkbox><br><br>
    <button ng-click="addEntry()">Edit</button>
    <button ng-click="home()">Back</button>
  </ion-content>
</ion-view>
  </body>

GL。

【讨论】：