Question

我有级联下拉列表。我尝试在对象{＆＃39;名称＆＃39;：＆＃39; pizzaName＆＃39;，＆＃39;尺寸＆＃39;：＆＃39; availableSizes＆＃39; ]}它被添加到现有列表中，用户使用该列表来选择披萨及其可用大小。所面临的问题是复选框的选择，因为它一起检查它们并且不会更新到列表。单击添加按钮时，下拉框和复选框都会指定一些值，并在下拉框和复选框中显示空白区域。

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>

Answer 1

您的项目存在一些问题。

您加载了ng-controller两次。转到body标签并删除ng-controller属性。
你的添加功能完全搞砸了，我把它改成了现在有用的东西，如果你在评论中有特定的问题，我不打算解释每一行代码。
您的复选框具有相同的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

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

1 个答案: